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Introduction 



■ MJ elcome to Visual Web Developer 2005 Express Edition For Dummies. 
WW Visual Web Developer is a tool for developing dynamic, data-driven 
Web sites. The dynamic part refers to the fact that each page your site sends 
out can be tailored — on the spot and even on the fly — for whatever person 
happens to be viewing the page at that moment. The data-driven part stems 
from the fact that the information needed to create pages dynamically is 
stored in a database. 



Historically, creating a data-driven Web site was an enormous task, requiring 
countless hours of tedious programming and debugging. Visual Web Developer 
(VWD) changes all that — allowing you to create dynamic Web sites in a 
quicker, easier, and more intuitive visual mode where simple drag-and-drop 
replaces hours of typing code. 

That's not to say that Visual Web Developer is so easy that you can just 
"think" a Web site into existence. There's still plenty of knowledge and skill 
required to develop a Web site. You just don't need as much knowledge and 
skill as was required in the pre- VWD olden days. 

If you've spent much time online trying to figure out how to work Visual Web 
Developer, you've probably been overwhelmed by countless buzzwords and 
confusing computer code that looks like something written by aliens from 
another planet. Much of what you've seen probably comes from people com- 
paring the VWD way of doing things to the old way of doing things (and that 
can get obscure in a hurry). 

This book takes a different approach: I don't talk about the old way of doing 
things at all. There are two reasons for that. The first is, if you don't know 
about the old way of doing things, then the comparisons don't help one bit. 
And if you do know the old way of doing things, then you can see for yourself 
how the new way is different without my telling you. 

At the risk of sounding smarmy, I might even go so far as to say that the old 
way of doing this is irrelevant now. By the time you've finished with this book, 
you'll see what I mean. And you'll be able to create powerful data-driven Web 
sites — perhaps without typing any code at all. 
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goal of this book is simple: To cover everything you really need to 
know about Visual Web Developer to create data-driven Web sites. And I do 
mean "need." You won't catch me wandering off into irrelevant product com- 
parisons or advanced topics that few people need. 

Another key ingredient of this book is its coverage of things that most other 
resources assume you already know — in fact, it's okay if you don't already 
know them. Everybody has to start somewhere, and Web-site development is 
tricky enough without having to fight a feeling of being left out. You won't get, 
"Sorry, you didn't learn our secret language umpteen years ago when we did, 
so you can't play." Here, just about everyone gets to play. 

It's important, especially for newbies, to understand that there's a big differ- 
ence between "everything you need to know (just to get in the game)," and 
everything there is to know. This book makes no attempt to cover everything 
there is to know about Visual Web Developer (as you'll notice right away 
because one person can actually carry the book). The reason is simple: Ten 
books the size of this one couldn't cover everything there is to know about 
Visual Web Developer. So you may need to rely on other resources from time 
to time. And that's okay too. 

Finally, though I'd like to be able to write this book in such a way that even a 
fresh-minted PC newbie could follow along, such a goal is unrealistic. Covering 
everything from your first mouse click to publishing your dynamic data-driven 
Web site would take too much space — so I have to make some assumptions 
about who is going to read this book. Which brings us to . . . 



Foolish Assumptions 

Creating dynamic data-driven Web sites, even with Visual Web Developer, is 
not a topic for absolute computer beginners. If you just got your first PC a 
few weeks ago, and so far have mastered only the art of e-mail, you may need 
to spend quite a bit more time learning Windows basics before you can tackle 
some of the terms used in this book without getting a headache. 

It would be best if you already had some experience creating Web pages on 
your own. There isn't really room in this book to discuss things like HTML 
and CSS in depth. So if those two acronyms are completely foreign to you, 
then you might want to study up on them before you start using this book. 

On the bright side, you don't really need to know anything, well, technical 
about ASP.NET or C# or SQL Server to use this book. You'll use those tech- 
nologies to create your site, sure enough, but I'll give you a practical briefing 
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in how to boss them around. You don't have to be a mechanic to drive; like- 
wise, you don't have to be a programmer or database developer already 
u use this book. 
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As you browse through this book you might notice some unfamiliar symbols 
or odd-looking text in gray boxes. Don't worry about 'em. The C> symbol 
you'll see in the text just separates individual menu options (commands) that 
you choose in sequence. For example, rather than saying "Choose New from 
the File menu" or "Click File in the menu bar, then click New in the drop-down 
menu," I just say something like this: 

Choose File O New from the menu bar. 

Creating VWD Web sites doesn't take much programming. What little code is 
actually required to perform some task is shown in a monospace font, like 
this: 

if ( IPage.lsPostBack) { 

txtFirstName . Text = Prof ile . FirstName ; 
txtLastName . Text = Prof ile . LastName ; 
txtAddressl . Text = Prof ile .Addressl ; 
txtAddress2 . Text = Prof ile .Address2 ; 
txtCity.Text = Prof ile . City; 
txtStateProv.Text = Prof ile . StateProvince ; 
txtZipPostalCode.Text = Prof ile. ZlPPostalCode, • 
txtPref Theme . Text = Prof ile . Pref erredTheme ; 

} 

When there are a few little chunks of code to show in text, like this — 
Profile . FirstName — I show them that way so you can see what is and 
what isn't code. 



What \!ou're Not to Read 

Reading computer books is not most people's idea of fun. (though it can be a 
great cure for insomnia, should the need ever arise). Any text that doesn't 
clearly fit into the need-to-know category of using VWD will be marked with 
Technical Stuff icons (more about those in a minute) or placed in gray side- 
bars. If you're in a hurry, or just feel overwhelmed by the need-to-know stuff, 
you can skip the Technical Stuff and sidebar text. (They'll still be there when 
you sneak up on them later.) 
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dynamic, data-driven Web site is a process; certain things must be 
done in a certain order. (A simple example: If you want people to be able to 
set up accounts on your site and log in, first you have to create some means 
of storing data about users.) For that reason, this book is divided into parts 
and chapters that present information in the exactly the same order you need 
to follow when creating your own Web site. The following subsections tell 
you what to expect from those parts and chapters. 



Part 1: Planning a Web Site 

Right off the bat, you need to decide whether to have your Web site support 
capabilities such as site membership, and whether to use the Master Pages 
feature of Visual Web Developer to give your site a consistent look and feel. 
This first part covers all the stuff you need to know if you want to build those 
features into your site. 



Part 11: Building \lour Web Site 

After you have the basic components for site membership and Master 
Pages in place, you can start focusing on specific content. In this part 
you'll discover the Visual Web Developer ways of defining content. 



Part 111: Personalization and Databases 

Chances are, if you use Visual Web Developer to create your Web site, you'll 
want to offer more than just basic logins and simple static content. Part III 
covers topics you need to beef up your site with personalization, themes, and 
your own custom database tables. 



Part IV: The Part of Tens 

What For Dummies book would be complete without a Part of Tens? In this 
part you'll find a quick reference to the top ten buzzwords every VWD geek 
needs to know to get into the VWD Geek clubhouse, and resources you can 
access for information that goes beyond the scope of this book. 
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Icons Used in This Book 

p through this book, you'll notice little icons like these sprinkled 
pages. They point out little chunks of text that either deserve a little 
extra attention or (if they're obscure) deserve very little attention. For exam- 
ple, a Warning icon points out places where being careless could cause real 
problems, whereas a Technical Stuff icon points out facts nice to know but 
not super-important. The icons are 

Tips point out handy tricks or techniques that can make things easier 
for you. 



These icons point out techniques where you really need to watch what 
you're doing. The world won't end if you mess up, but fixing the problem 
won't be easy. 

These icons point out tools and techniques that you'll use often in VWD, and 
hence should be high on your priority list of Things to Keep in Mind. 



These icons point out text that isn't desperately relevant to all readers, 
though useful in an arcane way. You can skip these for now, if you like. They'll 
wait. 



Where to Go from Here 

There's a definite start-to-finish process to go through if you want to build a 
data-driven Web site. So if you're new to Visual Web Developer and are just 
starting your first site, starting at Chapter 1 is your best bet. Those of you 
who already have some experience with VWD and have already laid out some 
components of your sites can jump in anywhere. 
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In this part . . . 

£very project has to start somewhere. In Visual Web 
Developer, that usually means creating a new, empty 
Web site and configuring it to support membership. While 
you're at it, you'll need to get the hang of using the pro- 
gram's major features, and techniques for getting text and 
pictures into the pages you create. If you want to provide 
a consistent look and feel for all the pages in your site, 
you might want to consider creating a Master Page as 
well. All of those early steps are covered here in Part I. 
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In This Chapter 

Getting your Web feet wet 

Getting around in Visual Web Developer 

Getting the help you need, when you need it 

Being compatible 

Finding someone to host your site 



■ /isual Web Developer (VWD) is a tool for building dynamic, data-driven 

Web sites. The Express edition, which is the subject of this book, is 
specifically designed for non-professionals who want to learn to use VWD 
and related technologies without having to spring for the tools used by large 
corporations and professional programmers 

That's not to say you can't create a "real" Web site with the Visual Web 
Developer Express. On the contrary, you can build a Web site of any com- 
plexity, and copy it to any Web server that supports ASP.NET 2.0 and other 
related technologies. It's just that the Express edition doesn't have some 
advanced features needed for very large commercial Web sites. 

But, as a beginner, you're probably a long way from developing a large, busy 
commercial Web site. There's no need to spring for a more expensive version 
of the product until after you've mastered the Express edition. 



Visual Web Developer (VWD) is not a tool for computer beginners. Not by 
a long shot. VWD allows you to develop fancy Web sites by using existing 
Web technologies such as XHTML, XML, CSS, ASP.NET, as well as the .NET 
Framework 2.0, SQL Server, C#, and Visual Basic. In fact, most of the help 
and documentation for Visual Web Developer presumes that you're already 
familiar with those tools and technologies. 
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Of course, each said tool or technology is a book-length topic in itself. Total 
coverage of all that is beyond the scope of a single book written about Visual 
;eloper. By way of a quick look, however, I describe what they are, how 
hem, and where you find online resources with more information. 



Installing Visual Web beVelopex 

One of the biggest challenges beginners face when trying to use a large, com- 
plex program like Visual Web Developer is knowing what to do, how to do it, 
and when to do it. Technical documentation and "theory" don't help with 
that. To really get your feet wet and understand the big picture, you need to 
spend some time using the program in a hands-on way. 

Getting that hands-on experience is what this book is about. And to make 
sure you can get that experience, we've included a free copy of Visual Web 
Developer Express on the CD that comes with this book. 

Like any program, you have to install Visual Web Developer Express before 
you can use it. So before you go any further here, take a moment to complete 
the installation instructions presented in Appendix B. 



Getting Around in (/WO 

Once installed, starting Visual Web Developer is no different from starting 
any other program. Assuming VWD is properly installed on your computer, 
just click the Start button and choose All ProgramsOVisual Web Developer 
2005 Express Edition. Figure 1-1 shows (roughly) how the program looks 
when it first opens. Don't worry if yours looks different — it's easy to move 
and size things to your liking. 

The list given here briefly describes the purposes of the main panes pointed 
out in Figure 1-1. (If some of the terms are new to you, don't worry about it; 
save the definitions for later when you start creating your site.) 

Toolbox: When you open a page or other item to edit, the Toolbox offers 
tools that allow you to add controls to the page. 

Design Surface: Also called the design grid, this is where you'll create 
and edit your Web pages. Initially you'll see a Start Page here, which I'll 
discuss that in a moment. 
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Solution Explorer/Database Explorer: Each Web site you create is orga- 
nized as a group of folders that shows up in the Solution Explorer. Any 



base you create for the site appears in the Database Explorer. Use 
abs at the bottom of the pane to switch between the two Explorer 
programs. 

**" Properties: Shows properties associated with the page or object with 
which you're currently working. 



Usinq panes 

You can move, size, show, and hide panes as needed to take advantage of 
your available screen space. To widen or narrow a pane, drag its innermost 
border left or right. If you have two or more panes stacked up along the edge 
of a screen, you can make the lower pane taller or shorter by dragging its top 
border up or down. The two-headed mouse pointers in Figure 1-2 show where 
you'd drag a couple of sample borders. (Ever see a two-headed mouse?) 



Solution Explorer/Database Explorer 



Figure 1-1: 

VWD main 
program 
window. 
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Figure 1-2: 

Tools for 
moving and 
sizing 
panes. 
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As pointed out in Figure 1-2, the title bar of a pane contains three buttons 
titled Window Position, Auto Hide, and Close. Clicking the Window Position 
option gives you the following choices on a drop-down menu: 

Floating: Converts the pane to a free-floating window that you can move 
and size independently of the program window. 

Dockable: Docks a pane that is currently showing as a tabbed document. 

v 0 Tabbed Document: Moves the pane into the Editing area, identified by a 
tab at the top of the area. Click the tab to make the pane visible. Right- 
click the tab and choose Dockable to re-dock the pane to the program 
window. 

Auto Hide: Converts open panes to hidden panes along the border of 
the program window, as in the example shown in Figure 1-3. To bring a 
pane out of hiding, point to (or click) its name. 

Hide: Hides a pane immediately so only its name appears along the 
border. To bring the pane out of hiding, click (or just point to) its name. 

To quickly put all of the visible panes into hiding, choose WindowOAuto 
Hide All. 

When you bring a hidden pane out of hiding, you'll notice that the Auto Hide 
"pushpin" is horizontal. Clicking that pushpin keeps the pane open. 



Getting panes back to normal 

With so many optional panes, and so many ways to move and size things, it's 
easy to make a real mess of your program window. But don't worry; to whip 
everything back into shape, all you have to do is choose WindowOReset 
Window Layout from the menu bar. 
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Figure 1-3: 

Hidden 
panes along 
the right 
border. 



Don't forget the Vieti menu 

The View option in the menu bar, shown in Figure 1-4, provides access to all 
optional panes (also called windows because they can be free-floating). If you 
close a pane by clicking its Close (X) button, you can always bring the pane 
back into view by choosing its name from the View menu. 



Figure 1-4: 

The View 
menu. 
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Some options on the View menu, like Object Browser and Error List, won't 
play any significant role until you start building your Web site. In most cases, 
es appear automatically when needed. I'll discuss those other 
the need arises in this, and later, chapters. 



The View menu also offers a Toolbars option you can use to show and hide 
various toolbars. As with many of the optional panes, toolbars appear — 
and disappear — as appropriate to whatever task you're performing at the 
moment. So don't fret about which toolbars are (or aren't) visible right now. 



About the Start Paqe 

The Start Page, shown in Figure 1-5, appears each time you open VWD. Under 
Recent Projects you'll see a list of Web sites you've worked on recently (if 
any). To open one of those Web sites, just click its name. 



Figure 1-5: 

The VWD 
Start Page. 



The Start page doesn't contain anything that's required to build a Web site. In 
fact, after you've created or opened a Web site, you can close the Start page 
by clicking the Close (X) button in its upper-right corner. If you change your 
mind and want to bring the Start page back to the screen, just choose ViewO 
Other WindowsOStart Page from the menu. 



Usinq VWb Help 

Quick, easy access to information is key to using VWD well. There's too much 
information for anyone to memorize. Visual Web Developer offers many ways 
of getting the information you need when you need it. The Help command on 
the menu bar, and the Help toolbar shown at the bottom of Figure 1-6, pro- 
vide many ways to look up information, as summarized below. 
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If the Help toolbar isn't visible, choose ViewOToolbars^Help from the menu 
bar. The navigation buttons at the left side of the Help toolbar will be enabled 
when you have some Help content visible on your screen. 

It's probably no stretch to assume you can find your way around the Help 
system and figure things out from the options available to you. But just so 
you know what's available, I'll briefly summarize the main Help options: 

is* How Do I: Opens the "How Do I?" page in the Design Surface. The page 
contains links to topics that describe how to perform various common 
tasks in VWD. 

V Search: Provides many options for searching both local and online help 
for a specific word or phrase. 

i>* Index: Provides an index, like the index at the back of a book, where you 
can look up a term alphabetically. 

«" Contents: Opens the Help Table of Contents in the right pane. Use it as 
you would the Table of Contents at the start of a book. 

v 0 Help Favorites: Opens the Help Favorites pane at the right side of the 
program window. When you're viewing a Help page, you click the "Add 
to Help Favorites Button" in the Help toolbar (just to the right of the 
Help Favorites button) to add the current page to your Help Favorites. 

*<" Dynamic Help: (Help menu only) Opens the Dynamic Help pane in the 
lower-right corner of the screen (Figure 1-7). As you create a page and 
click different types of controls, links to information about the context 
in which you're working automatically appear in this pane. 

Help on Help: (Help menu only) Offers detailed information on all the 
built-in help available to you. 

If you're new to Web development, much of the help may be over your 
head and not very helpful at all. Try not to let that intimidate you. 
Everyone has to be a beginner at some point. A major goal of this book 
is to get you from that absolute-beginner point to a more experienced 
level where the technical documentation can actually be helpful. 
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Closing Help pages and panes 

Most Help pages open up in the Design surface. You can switch among open 
pages using the tabs at the top of the surface. To close a pane, click its tab and 
then click the Close (X) button at the top of the Design surface (Figure 1-8). Or 
right-click the tab and then choose Hide. 
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Panes, like the Dynamic Help pane shown back in Figure 1-7, can be handled 
like any other pane, using tools and techniques described near Figure 1-2. 



Online resources 

No matter what your level of expertise coming into this book, sometimes you 
need specific information about the technologies that VWD supports. That 
includes the .NET Framework 2.0, ASP.NET, CSS, HTML, XML, SQL Server 2005, 
and the C# programming language. You don't need to master all these topics 
right off the bat. Heck, the printed documentation for the .NET Framework 
alone is over 8,000 pages. Not may people will be interested in learning or 
using everything it has to offer. It's just too darn much information, most of 
which has nothing to do with building Web sites. 

The trick is being able to find the information you need when you need it. 
Certainly the Help resources described in the previous sections have much 
to offer. But it never hurts to have a few extra resources at your fingertips. 

A good first resource is the Visual Web Developer section of my own personal 
Web site at www. coolnerds . com. (You can browse straight to that section 
using www. coo lnerds . com/vwd). For more technical information, consider 
the following Web sites: 
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is .NET Framework Developer Center: http: //msdn.microsof t .com/ 
net framework/ 



NET QuickStart Tutorials: www . asp . ne t / tutor ials /quicks tar t . 



\S Cascading Style Sheets (CSS) — W3C: www.w3 . org/style/css/ 

SQL Server Developer Center: http: / /msdn.microsof t . com/SQL/ 
i>* Visual C# Developer Center: http : / /msdn.microsof t . com/vcsharp/ 

V XHTML Home Page: www. w3 . org/TR/xhtmll/ 

V XML (Extensible Markup Language): www.w3 . org/XML/ 



Being Compatible With Web Browsers 

Every Web author has to make a trade-off decision between Web browser 
compatibility and fancy features. If you want to ensure that virtually every- 
one can visit your site, then you want to be compatible with very early ver- 
sions of Web browsers — say Internet Explorer 3 and Netscape Navigator 3. 
However, those older browsers don't support the better, fancier stuff you 
can use with modern Web browsers. 

If you want to use the capabilities of modern browsers, you have to limit 
your Web site to using only those. This is not as big a sacrifice as it might 
seem; almost everyone has more recent browsers. Few sites gear their new 
content to version 4 and earlier browsers anymore, and most browser manu- 
facturers are keeping up with current XHTML specifications. And since 
XHTML is the future for browsers anyway, most Web authors lean toward 
those specifications. 

Anyway, I'm sure one could debate browser compatibility ad infinitum — but 
here's the bottom line: Make that decision early on so you're better prepared 
to create consistent pages for the site and match what your visitors are most 
likely using. You use the Options dialog box in VWD to set browser compati- 
bility; here are the steps: 

1. Choose ToolsOOptions from VWD's menu bar. 
The Options dialog box opens. 

2. Click the + sign (if any) next to Text Editor HTML. 

3. Click Validation. 

4. Choose your preferred browser compatibility from the Target drop- 
down list. 

In Figure 1-9, 1 chose "XHTML 1.0 Transitional (Netscape 7, Opera 7, 
Internet Explorer 6)." 



5. Click OK. 
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Figure 1-9: 
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In case you're wondering why the option in the Options dialog box is named 
Validation, it's because VWD automatically validates your page each time you 
open it — that is, it makes sure everything in the page works properly when a 
visitor opens the page from a Web browser. If VWD finds a problem, it alerts 
you via an error message. 



The Options dialog box has a whole slew of other options. You can see 'em 
if you choose the Show All Settings check box at the bottom of the dialog 
box. There are a ton of other options to choose from, but the only one worth 
bothering with at the moment would likely be the General tab under HTML 
Designer. 

As you'll discover in Chapter 2, you can edit pages either in a WYSIWYG graphi- 
cal view, or a more textual Source view. You can switch views at any time with a 
single mouse click, which is no big deal. But if you choose Design View rather 
than Source View from the HTML Designer General options, as in Figure 1-10, 
your pages will initially open in Design view. 



Figure 1-10: 

Choosing to 
open pages 
in Design 
view. 
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When you've finished making your choices in the Options dialog box, just 
click OK to save your choices and return to VWD. 

DropBooks 

Publishing your Web Site 

As you may already know, simply creating a Web site on your own PC is 
only a first step; you can admire it while it sits there, but that doesn't make 
your site available to the public at large. That can happen only after you've 
obtained a domain name and published your site to a Web server located 
at that domain name. 

The company that provides the space on which you publish your site is often 
referred to as a hosting service, a hosting provider, a Web presence provider, or 
even a WPP for short. The hosting services that specifically support the tech- 
nologies you use in VWD to develop your Web site are ASP.NET 2.0 Hosters. 

Eventually you'll need a hosting service that supports ASP.NET 2.0 and SQL 
Server 2005. You can find a list of such hosting services at www. asp . net/ 
hosters/. There's no reason to sign up right this minute, especially if your 
site isn't built yet. But you can certainly shop around as time permits. 
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In This Chapter 

Creating a new Web site 
Defining and using folders 
Creating and editing Web pages 
Viewing pages in a Web browser 



rhe first step to using Visual Web Developer is to create a new, empty Web 
site. The phrase Web site in this context does not mean a Web site that 
people can browse to on the Web — that would be a live Web site or a produc- 
tion Web site. The Web site you create is initially just a bunch of files and fold- 
ers on your computer that nobody except yourself can get to. 

After you've created your new Web site, you can then start designing and cre- 
ating the site. Doing so involves creating folders and pages, putting things on 
pages, seeing how pages look when viewed in a Web browser, and so forth. 
Such things fall under the heading of "everyday basic skills" because you'll 
do them every time you use Visual Web Developer. They are also the topic of 
this chapter. 



Creating a Web Site 

From the standpoint of Visual Web Developer, a Web site is basically a folder 
that contains still more folders and all the files that make up a single, com- 
plete Web site. Unlike a live Web site, the empty one you create will be in 
your file system, or, in less technical terms, your own computer's hard disk, 
where nobody except you can get to it. 

Even in Visual Web Developer, there will be times when you may have to 
write some code, in a programming language, to get a job done. Visual Web 
Developer supports several programming languages — including Visual 
Basic, C#, and J#. In this book, we use C# (pronounced see sharp). If you're 
already familiar with one of the other languages, you're welcome to use it 
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instead. But given that you probably won't be writing much code, and given 
that these languages are so similar, you shouldn't have any problems using 
you're not familiar with the language. 



To create a new Web site that uses C# as its default programming language, 
follow these steps: 

1. From VWD's menu bar, choose FileONew Web Site. 

The New Web Site dialog box (shown in Figure 2-1) appears. 



Figure 2-1: 

The New 
Web Site 
dialog box. 
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2. Click ASP.NET Web Site. 

3. From the Location drop-down list, choose File System. 

4. From the Language drop-down list, choose a preferred programming 
language. 

As mentioned, I use Visual C# throughout this book. 

5. Optionally, change the location and name of the Web site. 

The site name is at the end of the lengthy path to the right of the 
Location drop-down list. In the example shown in Figure 2-1, I've opted 
to create a site named MyWDsite in the My Documents folder. 

6. Click OK. 

It takes a few seconds for VWD to create the site. When the site is ready, you 
end up with an empty page named Default . aspx, which is the Web site's 
home page. You also get a folder named App_Data, which is where your site's 
database will be stored (eventually). These are both listed under the site's 
root folder in Solution Explorer at the right side of the program window. 
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The Default . aspx page also opens automatically in the Design surface. 
You'll see its name in a tab at the top of the Design surface. In Design view, 
just looks like a big white sheet of paper. In Source view, you'll see 
L and other stuff that isn't visible to people who visit the site, as 
gure 2-2. 



Figure 2-2: 

A new 
Web site 
as shown 
in Solution 
Explorer, 
and an 
open page 
in Source 
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Speaking of Design view and Source view, notice the two little buttons titled 
Source and Design near the bottom of the window (Figure 2-3). Use those but- 
tons to switch from one view to the other. Note that these are just two differ- 
ent ways of looking at the page, as follows: 

Design: In this view, the page looks much as it will in a Web browser. Use 
this view for normal WYSIWYG (what you see is what you get) editing. 

V Source: This view shows the HTML and other tags for the page — 

"instructions" that tell the page how to behave and how to look in a Web 
browser. 



Figure 2-3: 

The Design 
and Source 
buttons. 



Design 



Closing and Opening Pages 

As mentioned, when you create a new Web site, VWD automatically creates 
one blank page, named Default . aspx, for the site. Your site will likely con- 
tain many pages. Typically you only want to work on one page at a time 
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(or perhaps a few pages) — and that means opening and closing pages for 
editing. Right now there's only one page in the site, and it's open. To close a 



Click the Close (X) button in the upper-right corner of the Design surface 
(near the mouse pointer in Figure 2-4). 

i>* Or choose File O Close from the menu bar. 



Figure 2-4: 
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If you made any changes to the page since you last opened it, a dialog box 
asks if you want to save those changes. Choose Yes (unless you made a 
mess of things and don't want to save your changes). The page disappears 
from the Design surface, but its name remains visible in Solution Explorer. 

To open a page, just double-click its name in Solution Explorer. When the 
page is open, use the Design and Source buttons to choose how you want 
to view the page. 



Creating and Using Folders 

You can use folders to organize pages and other components in your Web site 
in much the same way you use folders in Windows to organize files. For exam- 
ple, you might want to create a folder for storing all the site's pictures. To 
create a folder, follow these steps: 

1. Make sure your site is open and go to the Solution Explorer pane. 

2. Right-click the site name at the top of the Solution Explorer tree and 
choose New Folder, as shown in Figure 2-5. 

3. Type in a new name for the folder, and then press Enter. 

Figure 2-6 shows an example I created — a new folder named images. I'll use 
that folder to store some of the pictures for my Web site. 

To rename a folder, right-click its icon in Solution Explorer, choose Rename, 
type in the new name, and press Enter. 
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Figure 2-5: 

Creating a 
folder. 
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Copying files to folders 

You can create pages in any folder you wish within your site. But what about 
files you may have already created, such as pictures you intend to use on 
your site? Well, you can move or copy those from their current location into 
folders in Solution Explorer, using the drag-and-drop method. 

For example, to copy a picture from your My Pictures folder into a folder, 
leave VWD open with your site folder open in Solution Explorer. Then just 
drag-and-drop any icon, or selected group of icons, from your My Pictures 
folder to the site folder in Solution Explorer. 

Figure 2-7 shows an example where I dragged a file named logo . gif from the 
My Pictures folder to the Images folder in Solution Explorer. When the Images 
folder is expanded (showing a - mark instead of a + mark), the logo . gif file 
within that folder is visible. 
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Figure 2-7: 

Here's the 
Logo.gif file 
in the 
Images 
folder. 
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If drag-and-drop isn't your thing, you can copy and paste instead. For exam- 
ple, if you have some pictures in a folder that you need to use in a Web site, 
open that folder in Windows. To copy multiple pictures, select their icons 
using standard Windows techniques. Then right-click the picture's icon (or 
any selected icon) and choose Copy. Then, in Solution Explorer, right-click 
the name of the folder into which you want to place the picture(s) and 
choose Paste. 



Renaming and deleting folders 

You can rename or delete any regular folder by using techniques similar to 
those in Windows: 

■ ^ To rename a folder, right-click the folder, choose Rename, enter the new 
name, and press Enter. 

j** To delete a folder, right-click the folder name and choose Delete. 



Editing Pages 

To edit an existing page in VWD, you first need to open the page so it's visible 
on the Design surface. To open a page, double-click its icon in Solution 
Explorer. When you open an . aspx page (such as Default . aspx), you see 
the Design and Source buttons at the bottom of the Design surface, so you 
can switch between the two views. 
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pned briefly in the preceding section, VWD allows you to edit an 
ge in either Design view (which shows what the page looks like in a 
browser) or Source view (raw HTML and ASP.NET). Typing and editing text in 
Design view is like typing and editing in Microsoft Word, FrontPage, or just 
about any other text editor or word processor: You click the page to get the 
cursor into position, and then type your text. Figure 2-8 shows an example 
where I typed the text Welcome to my site on the (otherwise empty) 
Default . aspx page. 



Figure 2-8: 
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All the standard text-editing tools and techniques work on the Design surface. 
For example, you can delete with the Backspace and Delete keys. You can 
select text by dragging the mouse pointer through the text, or by holding 
down the Shift key while positioning the cursor with the navigation keys. 
You can copy and paste text to or from the Design surface. 



Selecting and formatting text 

Selecting and formatting text works the same in VWD as it does in word pro- 
cessing programs. To format a chunk of text, first select (highlight) the text 
you want to format by dragging the mouse pointer through that text. Then 
choose a format option from the Formatting toolbar. 

In Figure 2-9, for example, I selected the text welcome to my site so it's 
highlighted. Then I clicked the Block Format button at the left side of the 
Formatting toolbar; the figure shows how the screen looks just before I 
click the Headingl <Hl> option. 
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Undoing changes 

As in most modern applications, you can undo the most recent changes you 
made to a page by using either of these methods: 

If* Choose Edit O Undo from the menu bar. 
V Press Ctrl+Z. 
**" Click the Undo button in the Standard toolbar. 

VWD has multiple levels of undo and redo, so you're not limited to undoing 
only your most recent change. However, when you save a page, you "commit" 
all changes up to that point. Undo actually only reaches back as far as your 
last save. 



Adding pictures 

To add a picture to a page, first make sure you move or copy the original pic- 
ture into a folder in Solution Explorer. Make sure all the files that make up 
your Web site — including pictures — are in folders within Solution Explorer. 
Otherwise, when you upload your finished site to a Web server, the pictures 
won't be included in the upload, which means that anyone trying to view a 
page that contains a picture will just see a red X where the picture should be. 

To add a picture to a page, just drag its icon from its folder in Solution Explorer 
onto the page. Figure 2-10 shows an example where I dragged a picture named 
Logo . gi f onto the page, from a folder named Images in Solution Explorer. 
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Figure 2-10: 

Dragging a 
picture's 
icon onto 
the page. 




Drag 
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On the Design surface, the picture shows dragging handles (small squares 
along the border). If you don't see the handles, click the picture to select it; 
they'll show up. Then you can size the image by dragging any handle. 



Chanqinq properties 

If you look around the room you're in right now, you'll probably see many 
physical objects — PC, keyboard, mouse, desk, and whatever else is in the 
room. No two objects are exactly alike. Instead each object has certain prop- 
erties such as size, shape, weight, purpose, and so forth that makes it unique. 

Just about anything you add to a Web page is also an object. And (like objects 
in the real world) objects on Web pages have properties. An object's proper- 
ties are settings that define its characteristics — such as size, shape, location 
on the page, and so forth. 

To see, and perhaps change, an object's properties, just select (click) the 
object of interest and look at the Properties pane. Or, right-click the object 
and choose Properties. The item's properties appear in its properties sheet, 
which always shows in Visual Web Developer's Properties pane. 

Figure 2-11 shows an example where I'm viewing the properties for a picture. 
The <img> tag near the top of the Properties sheet is a reflection of the fact 
that, like all pictures in all Web sites, this particular picture is displayed by 
an HTML <img> tag. 

To make the Properties sheet free-floating (as in Figure 2-11), choose Floating 
from its Window Position button. (See Chapter 1 for more details.) 
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Figure 2-11: 

An object's 
properties. 




Properties 




HTML (Hypertext Markup Language) is a set of tags used to define the gen- 
eral format of items on a Web page. Visual Web Developer is a tool for people 
who already know that, and know what the HTML tags are. That's why when 
you click on a picture and look at its Properties sheet, you see the term 
<img> in the properties sheet rather than the word picture. The assumption 
is you already know that <img> tags show pictures. 



Different types of objects have different properties. The list of properties for 
an object may be long, so you may need to use the scrollbar at the right side 
of the list to see them all. Most properties can be changed by clicking the 
column to the right of the property name. 




An object's properties sheet provides a means of tweaking optional settings 
for the object, but not the only means. In fact, any settings that relate to the 
look and feel of the object on the page are best dealt with outside the proper- 
ties sheet through the Style Builder or CSS (Cascading Style Sheets), which 
are covered in Chapters 5 and 6. 

To get to the Style Builder, right-click the item you want to style and choose 
Style. 



Switching rterts 



The Design view shown in the previous figures allows you to edit a Web page 
in a WYSIWYG (pronounced wizzy-wig — "what you see is what you get") 
mode. In other words, what you see in the Design view is very similar to what 
a person visiting the page with a Web browser would see. That's the way 
most people like to work. 
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As mentioned earlier, there's also a Source view for editing Web pages. To 
switch to Source view, click the Source button at the bottom of the Design 
'o switch back to Design view, click the Design button at the 
the Design surface.) 



The Source view shows the HTML tags (and other stuff) that VWD is creating 
behind the scenes as you create the page in the Design view. Whether or not 
any of that looks familiar depends on your familiarity with HTML. 

Those of you who are familiar with HTML will recognize similarities between 
the tags and the content of the page. For example, if you switch to Source 
view while viewing the page in Figure 2-11, you might recognize the tags 
shown here: 



<img src= " Images/Logo . gif " /> 
<hl>Welcome to my site</hl> 



Dragging the logo . gif file onto the page created the <img> tag. welcome to 
my site is typed text. The <Hl> and </Hl> tags were added by selecting the 
typed text and choosing Heading 1 <H1> from the Block Format menu on the 
toolbar. 



There's rarely any need to work directly with HTML tags. So don't get too 
uncomfortable looking at all the gibberish in the Source view. But for those 
of you who are familiar with HTML, I offer the following section. 

Editing in Source Vieu) 

If you're familiar enough with HTML to work directly in the Source view, 
you'll be able to take advantage of VWD's IntelliSense technology. IntelliSense 
"looks at" what you're typing, or have already typed, and provides menus of 
options representing valid HTML keywords relevant to the context in which 
you're typing. I think an example will best illustrate. 

Suppose you're working in the Source view and want to insert an HTML tag. 
As soon as you type the opening angle bracket, <, a menu appears listing 
valid words you can type after the opening bracket, as in Figure 2-12. 

When the IntelliSense menu appears, you have two choices. You can ignore it 
and just keep typing. Or you can scroll through the menu and double-click 
the word you want to insert next into the brackets. 

If you enter the first tag of a pair, IntelliSense will usually add the closing tag 
for you automatically. For example, if you type <p> into the page in Source 
view, you'll get <p></p>. The cursor lands between the two tags so you can 
type within the tags immediately. 
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Figure 2-12: 

IntelliSense 
menu in 
Source 
view. 
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When you use XHTML for validation, unpaired tags such as <img> and 
<br> must end with a slash and a closing angle bracket (/>). For example, 
<img . . . / > and <br/>. When you edit in the Design surface, the correct tags 
are created automatically. If you plan on writing HTML yourself, make sure 
you're up on XHTML rules, which you can find online at www. w3 . org/Markup. 

If you're not familiar with HTML and don't quite get what value IntelliSense 
offers, don't worry about it. For the most part, you can create Web sites in 
VWD by using simple drag-and-drop techniques and properties without 
typing any HTML at all. 




All Web pages contain some HTML, even though you never see HTML tags in 
pages. That's because your browser renders the HTML into what you see in 
your browser. For example, the HTML <b>Hello</b> renders as the word 
Hello in boldface, without the tags. If you use Internet Explorer as your Web 
browser, you can choose ViewOSource from its menu bar to see the unren- 
dered HTML source page. 



Sai/inq your Work 

As soon as you start editing a page, you'll notice that the tab that shows the 
page name at the top of the Design surface is boldfaced and shows an aster- 
isk, as in the example shown in Figure 2-13. The asterisk means "y° u ve 
changed this page since you last saved it, and those changes have not yet 
been saved." To save the page with your most recent edits, use whichever 
technique below is most convenient: 

Click the Save button in the toolbar (shown near the mouse pointer in 
Figure 2-13). 

Press Ctrl+S. 

i>* Choose File O Save Pagename from the menu bar (where Pagename is 
the name of the page you're editing). 
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Clicking the Save All button next to the Save button will do the trick too. As 
its name indicates, the Save All button saves all open pages. 

\jf joV^^empt to close an edited page without saving it first, you'll see a 
prompt asking whether you want to save your changes. You should choose 
Yes unless you're sure you want to abandon all changes you've made since 
you last saved the page. 



Figure 2-13: 

Changed 
page and 
Save button. 



Save button 



Asterisk 



MyVWDSite - Visual Web Developer 2005 Express Editit 



Start Page Default.aspx* 
Client Objects & Events 



File Edit Vii w Website Build Debug Tools W indow Comri 

Toolbox * f x 

- General a 

+ HTML 

+ WebParts 

+ Login 

+ Navigation 

+ Validation 

t n^r* 



<%@ Page Language ="C# 

2 1 

3| <!DOCTYPE html PUBLI 
5;Q <html xin 1 ns = " httn : / / w 




Dealing u/ith code-behind files 

Many . aspx pages have a corresponding code-behind file. These pages con- 
tain programming code that defines the behavior of the page, as opposed to 
any kind of visible content. The code in a code-behind page is written in 
whatever programming language you choose when first creating the Web site. 
In this book's examples, that will always be the C# programming language. 

In Solution Explorer, any page that has a code-behind file shows a + sign next 
to its icon, or a minus sign with an icon for the code-behind file. The name of 
the code-behind file is the same as the name of the .aspx page with a . cs 
extension added on, as in Figure 2-14. (The . cs is for C#. If you use a different 
programming language, the extension will adjust accordingly, for example, 
. vb for Visual Basic.) 



Figure 2-14: 
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behind file 
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Default . 
aspx. 
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When you open a code-behind file you see code. There is no Design view for 
code, because a code-behind file can only contain code — computer instruc- 
itten in a programming language like C# or Visual Basic. The code 
something like this: 



using System; 

using System. Data; 

using System. Configuration; 

using System. Web; 

using System. Web. Security; 

using System. Web. UI; 

using System. Web. Ul.WebControls; 

using System . Web . UI . WebControls . WebParts ; 

using System. Web. UI .HtmlControls; 

public partial class _Default : System. Web. UI . Page 
{ 

protected void Page_Load( object sender, EventArgs e) 
{ 

) 

} 



The meaning of the code isn't important at the moment. Suffice it to say that 
the code file is where the logic of a Web page resides, whereas HTML controls 
what appears on-screen when someone views the page through a Web 
browser. You'll see examples of how that works in Chapter 9. Whether or not 
you'll ever have to deal with code-behind pages depends on what you want 
your Web site to do — so don't let all that gibberish in the code-behind page 
worry you. 

To close a code-behind page, just click its Close (X) button near the upper- 
right corner of the Design surface. 



Titling Pages 

Every Web page has a page title that appears in the Web browser's title bar 
when someone is viewing the page. That same title also shows up in links to 
the page from most search engines, like Google. In HTML, the title must be 
placed between <title> . . . </title> tags, which in turn must be inside the 
page's <head>. . .</head> tags. 

In Visual Web Developer, you can follow these steps to create a title for what- 
ever page you're currently editing in the Design surface: 
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1. From the drop-down list at the top of the Properties sheet, choose 

<DOCUMENT>. 
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to the bottom of the Properties sheet and type your page title as 
itle property. 



For example, in Figure 2-15, I've given the page the general title MyVWDSite 
Home Page. 



Figure 2-15: 

Typing a 
page title 
for the 
browser's 

title bar. 
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You won't see anything in the Design view of the page, because this title 



doesn't show up on the Web pag 
required to show the page title: 


e 


In Source view, you'll see the HTML 


<title>MyVWDSite 


Home Pag 


e</title> 






The only other time you'll see that title is when you view the page in a Web 
browser, where it appears in the title bar at the top of the Web browser's pro- 



gram window. Which brings us to . . . 



Viertinq Paqes in a Web Browser 

The Design view of a page gives you a good sense of how the page will look in 
a Web browser. But it doesn't always provide an exact view. To put your page 
to a real test, view the page in a Web browser. After all, when the site is up 
and running on a Web server, everyone who visits the site will be doing so 
through a Web browser. 

To view, in a Web browser, the page you're currently working on in Design or 
Source view in VWD, use whichever method below is most convenient for you: 

v 0 Right-click some empty space on the page and choose View In Browser. 
is* Click the View in Browser button in the toolbar (left side of Figure 2-16). 
W Press Ctrl+F5. 
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If you want to view in a Web browser a page that isn't currently open, right- 
click its name in Solution Explorer and choose View in Browser, as shown at 
side of Figure 2-16. 



>r 2005 Express Edition 
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browser. 
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The page opens in a Web browser, mostly likely Microsoft Internet Explorer. 
Figure 2-17 shows the Default . aspx page open in Internet Explorer. Note 
the page title, MyVWDSite Home Page, in the upper-left corner of the figure. 
That's the only place that page title is actually visible on the screen. 



Figure 2-17: 

The 
Default . 
aspx page 
in Microsoft 
Internet 
Explorer. 
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The browser window will likely cover Visual Web Developer's program 
window. To go back to designing your page, just close the Web browser by 
clicking the Close (X) button in its upper-right corner. 
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Opening and Closing Web Sites 



ia Web site is no small feat, and it's pretty unusual to accomplish 
much in a single sitting. So before I end this chapter, let's take a quick look 
at managing Web sites as a whole. 

When you're in Visual Web Developer and working on a site, you can close 
the site without closing the program — handy if you're working on multiple 
sites. To close the current Web site, choose FileOClose Project from VWD's 
menu bar. (VWD often uses project to mean Web site.} 

When you first open VWD, you won't be taken to your Web site automatically. 
Even so, you can easily open your site by any of the following methods: 

f" Click your site's name under Recent Projects on the VWD Start Page. 

v 0 Choose FileORecent Projects from the menu bar. Then click the name of 
the Web site you want to open. 

V Choose FileOOpen Web Site from the menu bar. When you choose this 
option, the Open Web Site dialog box opens. Click File System, then use 
the directory tree to navigate to the folder in which you placed your pro- 
ject (look for a regular folder icon with whatever name you entered 
when you created the site). 

Whichever method you use to open your Web site, the folders and files 
appear in Solution Explorer exactly as you left them. 
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Chapter 3 

Drop Wnin aMembership Site 

In This Chapter 

Configure your Web site for membership 
Create folders for members-only content 

Prevent anonymous users from accessing members-only content 
Create and manage user accounts 

••••••••••••••••••••••••••••••••••••••••••••••••• 

m mne of Visual Web Developer's best features is its ability to create a 

membership Web site with minimal fuss and muss. As the owner of a 
membership Web site, you can control who has access to what content. For 
example, you can have general content for anonymous users, people who just 
happen to wander into the site, and then you can have premium content for 
members only, where members are people who have set up an account on 
your site. 

The basic idea is pretty simple. You create a folder, perhaps named Member- 
Pages, where you put all members-only content. Then you set up a role, per- 
haps named SiteMembers. Finally, you create a rule that says "anonymous 
users cannot access content in the MemberPages folder; only people in the 
SiteMember role can access pages in the MemberPages folder." In other 
words, if someone who just happens to visit your site wants to see your spe- 
cial content, that person must first join your site by setting up a user account. 

Creating a folder {or Members-Onty 
Content 

The first step to setting up a membership site is to decide how you're going 
to organize your content. You'll likely want some of your site's content to be 
available to anonymous users. An anonymous user is anyone who visits the 
site without creating or logging into an account on your site. 

In addition to the general content that's available to everyone, you may want 
some privileged members-only content that's available only to site members — 
people who have joined your site by setting up a user account. 
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To keep the privileged members-only content separate from the general con- 
tent, you need a folder, perhaps named MemberPages. Keep all your privi- 
tent in the MemberPages folder. Keep general content out of that 
e MemberPages folder can be just a regular folder in which you 
store pages. 



To create a folder in Visual Web Developer, right-click the site name at the 
top of Solution Explorer and choose New Folder. Then type the folder name 
and press Enter. Figure 3-1 shows an example where I've added a new, regular 
folder named MemberPages. As its name implies, the MemberPages folder 
will (eventually) contain pages that only site members can access. 



Figure 3-1: 

A regular 
folder 
named 
Member- 
Pages has 
been added 
to the site. 
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There is nothing special about the MemberPages folder. It's just an empty 
folder in which you can store pages. If you want to use that MemberPages 
folder to store privileged members-only content, you need some means of 
distinguishing between site members and the general riff-raff (anonymous 
users). In other words, your site needs an infrastructure that can store 
information about site members, allow site members to log into their user 
accounts, and so forth. To create that infrastructure, you use the Web Site 
Administration Tool. 



Usinq the Web Site Administration Tool 

The Web Site Administration tool, often abbreviated WAT, is the tool you use 
to administer access to pages within your Web site. To start the tool, follow 
these steps: 

1. If you haven't already done so, start Visual Web Developer and open 
your Web site. 

2. Choose WebsiteOASP.NET Configuration from the menu bar. 

The tool opens in a Web browser like the one in Figure 3-2. 
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The tabs near the top of the page (Home, Security, Application, and 
Provider), and links on the Home tab, provide tools both for creating a mem- 
ite and for managing a membership site after it's created. The first 
tting up a membership site is to make sure Visual Web Developer 
can connect to SQL Server, the database program used to store information 
about users. To test your connection, follow these steps: 



1. Click the Provider tab or the Provider Configuration option on the 
Home tab. 

2. Choose the Select A Single Provider For All Site Management Data 
option. 



Figure 3-2: 

The Home 
tab in the 
Web Site 
Administra- 
tion Tool. 
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3. Make sure that AspNetSqlProvider is selected, as shown in Figure 3-3. 
(Most likely there won't be any other options to select anyway). 



Figure 3-3: 

Link to test 
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Server 
connection. 
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4. Click the Test link to the right of your selection to make sure your site 
can connect. 
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should see a message that reads "Successfully established a con- 
ion to the database." Click OK. 



If the test fails the first time, just try again. Sometimes it takes a few 
tests for the connection to work. 

6. Click the Back button in the lower-right corner of the page. 

7. Click the Home tab in the Web Site Administration Tool. 

At this point, you've told VWD that you want to use SQL Server as your site's 
database management system for storing information about users and user 
accounts. The next step is to choose an authentication type. 



Choosing an authentication type 

If you've ever set up any kind of an account on any Web site, you know that in 
order to log in you must enter two pieces of information: Your user name (or 
e-mail address) and your password. The user name defines who you are. Your 
password verifies that you actually are who you say you are (assuming you 
haven't been handing out your password to people). That two-step process is 
known as authentication because it both identifies you and verifies that you 
are who you say you are. 

In Visual Web Developer, you can choose between two forms of authentica- 
tion: Windows authentication or Forms authentication. Windows authentica- 
tion works only on a small Web site used within a local network. Assuming 
you intend on putting your site on the Internet, you'll need to follow these 
steps to choose Forms authentication: 

1. In the Web Site Administration Tool, click the Security tab. 

2. Click the Select Authentication Type option under Users on the 
Security tab. 

3. On the next page (Figure 3-4) choose the From the Internet option. 

4. Click the Done button. 



With the data provider and authentication mode selected, you're ready to set 
up your site's security by defining the access rules of your site. The first step 
is to create a role that will distinguish members of your site from anonymous 
users who are just looking around. 
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Figure 3-4: 
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Web site. 
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Creating Roles to Categorize People 

If you think about how a business is organized, access to business resources 
and information tends to be based on people's roles within the company. For 
example, executives might have access to everything, managers have access 
to sensitive information within their department, and workers have access to 
whatever they need to do their jobs. Your role in the company determines 
your access to information. 

In a membership Web site, access to information is also based on roles. A 
person who just browses to the site is an anonymous user because he hasn't 
signed into an account to identify who he is. To separate the anonymous 
users from people who are members with accounts, you need a role, perhaps 
named SiteMembers. In order for someone to be considered a SiteMember, 
she must have an account on the site, and must log into that account. After 
she's logged into her account, the person is no longer in the anonymous user 
role. Instead, that person is in the SiteMembers role. 

To use roles in your Web site, you first have to enable that feature via the 
Web Site Administration Tool by following these steps: 

1. If you haven't already done so, click the Security tab in the Web Site 
Administration Tool. 

2. If roles aren't already enabled, click the Enable Roles link. 

The center pane near the bottom of the Security tab now provides a link 
titled Create or Manage Roles as shown in Figure 3-5. 




Do not create a role for anonymous users. Anyone visiting your site is by 
default an anonymous user, and you need not define such a role in the Web 
Site Administration Tool. 
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Click the links in the table to manage the settings for your application. 
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After you've enabled roles, you can define roles for people who visit your 
site. In a simple membership site, you really only need one role, like 
SiteMembers. To create a role, follow these steps: 

1. On the Security tab of the Web Site Administration Tool, click the 
Create or Manage Roles option. 

2. Under the Create New Role heading on the next page, type a role 
name. 

For example, in Figure 3-6 I'm about to create a role named SiteMembers. 

3. Click the Add Role button. 



Figure 3-6: 

About to 
create a role 
named Site- 
Members. 



You can optionally add roles, or groups, that enable you to allow or deny groups of 
users access to specific folders in your Web site. For example, you might create roles 
such as "managers," "sales," or "members," each with different access to specific 
folders. 



Create New Role 



New role name: SiteMembers 




The page changes slightly to show the roles you've already created. For 
example, in Figure 3-7, you can see where I've created the SiteMembers role. 
You could, at this point, create more roles by entering role names and click- 
ing Add Role for each role you want to create. For this example I'll just stick 
with the SiteMembers role. When you're done creating roles, click the Back 
button. 

After you've clicked the Back button, you're returned to the Security tab of 
the Web Site Administration Tool. 

Sometimes it helps to hear things explained in two or more ways. For a 
different explanation on using the Web Site Administration Tool, click the 
How Do I Use This Tool? link near the upper-right corner of the Web Site 
Administration Tool. Then click the Web Site Administration Tool - Security 
tab in the Overview page that opens. Also, pay attention to the text that 
appears on every page that opens in the Web Site Administration Tool. 
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Figure 3-7: 

lb 

role is 
created and 
added to the 
list of role 
names. 
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eate New Role 



Add /Remove Users 



Creating Access Rules 



The whole purpose of creating roles is to distinguish among different types of 
people visiting your site, so you can control who has access to what. The way 
you do that is by defining access rules for different roles. 

For example, at the start of this chapter I created a folder named Member- 
Pages. The plan is to put all privileged content into that folder, to keep it 
separate from regular content that all users can view. But to make that 
happen, we need an access rule that denies anonymous users access to that 
MemberPages folder. You use the Web Site Administration tool to create 
access rules. Here are the steps: 




1. In the Web Site Administration Tool, click the Security tab (if you 
aren't already there). 

2. In the column titled Access Rules, click the Create Access Rules link. 

3. In the left column of the resulting Add New Access Rule page, click 
the name of a content folder for which you want to create a rule. 

The term content folder means regular folders you created yourself, 
like my MemberPages folder. There's no need to assign permissions to 
the root folder at the top, or special folders like App_Data. Those pre- 
defined special folders already have all the permissions they need for 
the site to work correctly but remain secure. Changing those permis- 
sions will likely cause a world of confusion and problems for you. And 
all for naught because you shouldn't have messed with them in the first 
place. 

4. In the center column, choose the role for which you want to create an 
access rule. 

For example, in Figure 3-8, I've chosen MemberPages as the folder for 
which I want to create a rule. In the middle column I've chosen 
Anonymous Users as the role for which I want to create a rule. 
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role. 
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5. In the Permission column, choose whether you want to Allow or Deny 
people in the selected role access to the selected folder. 

For example, in Figure 3-8, I've chosen the Deny option. In other words, 
the three selections made in Figure 3-8 define a rule that says 
"Anonymous users cannot access pages in the folder named 
MemberPages." 

6. Click OK. 

At this point, you have defined one access rule. There may be times when 
you need to manage (view, change, or delete) access rules you've already 
defined. Which brings us to . . . 



hAanaqinq access rules 

To review, change, or delete access rules you've defined in the past, click the 
Manage Access Rules link on the Security tab of the Web Site Administration 
Tool. The Manage Access Rules page of the tool opens. 



Why does it say "Select a directory"? 



You might have noticed the term "directory" 
under "Add New Access Rule" in Figure 3-8. 
The term directory is just another word for 
folder. Directory is the older term, harkening 
back to the early days of computing before 
there were icons on the screen to represent 
such things. The term folderis used more often 



now, because icons that represent folders 
always look like little manila file folders. That's 
because a computer folder (or directory) is a 
"container" in which you store files, just as a 
folder in a file cabinet is a container in which 
you store paper documents (files). 
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It's important to keep in mind that access rules are defined on a folder-by- 
folder basis. Therefore, in the left column of the page that opens, your first 
fc be to click on the name of the folder for which you want to view or 
:cess rules. 

For example, in Figure 3-9 I've already clicked on Manage Access Rules to 
get to the page shown. I've also already clicked on MemberPages in the left 
column to see access rules for that specific folder. The center column shows 
all the rules defined (so far) for that MemberPages folder. 



Figure 3-9: 

Viewing 
access 
rules for the 
Member- 
Pages 
folder. 
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Add new access rule 



Notice that with MemberPages selected in the left column, the first rule denies 
anonymous users access to the MemberPages folder. Below that is a dimmed, 
unchangeable rule that reads Allow [all]. It's important to understand that 
rules are applied in top-to-bottom order. Because the Deny permission is listed 
first, anonymous users won't be able to access pages in the MemberPages 
folder. However, everyone else will have access to that folder. 

In this example, "everyone else" means SiteMembers, because that's the only 
other role a person could possibly belong to in this particular Web site 
because it's the only other role we've created. 

There is no way, and no reason, for you to change, remove, or worry about 
that dimmed Allow rule that applies to [all] users. That rule is fixed and 
based on the most fundamental (yet unspoken) rule of all, which can be 
stated like this: 

If you have information you don 't want to share with others, don 't publish 
that information on the Internet. 

The Allow [all] rule is based on the simple fact that if you're publishing 
information on the Web, you're doing so because you do want to share that 
information with other people. The Deny access rule just refines that basic 
assumption by saying "I do want to share information in the MemberPages 
folder with some people who visit my site. I just don't want to share that 
information with anonymous users who visit the site." 

That's all you need to prevent anonymous users from accessing members- 
only content in the MemberPages folder. So let's take a moment to review, in 
English, what you've done in the above steps: 
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**" Created a folder named MemberPages for storing pages to be published 
on the Web. 



pBoote 



ted a role named SiteMembers that defines people who have an 
unt and are logged into an account (as opposed to anonymous 
users). 



Created an access rule that prevents anonymous users from getting to 
members-only content in the MemberPages folder. SiteMembers will 
have access to that content (because there's no Deny rule preventing 
them from viewing the contents of that folder). 

All of that is just an example. A site can have many content folders, many 
roles, and many access rules to control exactly who has access to what. But 
in the interest of keeping it simple and sane, we'll stick with the relatively 
easy example you've already defined here: The site contains a folder named 
MemberPages in which you can put members-only content. 

At the moment, there's no way to test whether or not this will actually work. 
One reason why is that there is no user account on the site, and hence nobody 
in the SiteMembers role. For another, there is no content in the MemberPages 
folder to try to access. We can deal with the first problem by creating a hypo- 
thetical user account and putting that user in the SiteMembers role. As you'll 
see next, you can use the Web Site Administration Tool to create that user 
account. 



Creating a User Account 

You need at least one user account to work with while developing your Web 
site, just for testing and debugging purposes. You might as well create an 
account for yourself. To do so, you need to be in the Web Site Administration 
tool. If you've been following along, you're already in that tool. Otherwise, 
choose WebsiteOASP.NET Configuration to get into the tool. 

In the Web Site Administration tool, click the Security tab. Then click Create 
User in the left column under the Users heading. Doing so will take you to the 
Create User page where you can define a user account. 

Because the account is purely hypothetical, it doesn't much matter what you 
enter as a User Name, E-mail address, Security Question, and Security Answer. 
However, the password must be at least seven characters in length and must 
contain at least one non-alphanumeric character (that is, a punctuation mark). 
So, for testing purposes, use a password like: 



password! 
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Active versus inactive users 



ounffemfferehip system can consist of active 
and inactive accounts — which can be handy 
in a situation where people pay dues to main- 
tain their accounts. If a member stops paying 
her dues, you can keep her in the database as 
an inactive user. You can then keep the user out 



of privileged content, but still have the user's 
information in the database. This is better than 
deleting the user account because you can use 
the information in the database to send e-mail 
messages to inactive users, reminding them to 
pay their dues. 



Chapter 7 covers ways that you can relax the password requirements so that 
users can enter passwords they're more likely to remember. 

Because the real goal of this hypothetical account is to make sure the 
SiteMembers role works as intended, you need to select (check) the 
SiteMembers check box to the right of the Create User form. Figure 3-10 
shows an example where I've created a hypothetical user named 
TestMember, and have placed that user in the SiteMembers role. 



Figure 3-10: 

A hypo- 
thetical user 
named Test- 
Member. 



Sign Up for Your New Account 



User Name: TestMember 

Password: |««»»w ~ 
Confirm Password: •••••••• 



E-mail: alan@coolnerds com 



Security Question: Favorite guitarist 

Security Answer: hendrix 



| Create User 



0 Active User 



Select roles for this user: 
0 SiteMembers 



Near the bottom of the form you'll notice an Active User check box. You'll 
want to make sure that box is selected (checked). Then just click the Create 
User button. You'll get some feedback indicating that the account has been 
successfully created. Click Continue to return to the Create User page. 
Because you only need one user account to test things out, you're finished 
here. Click the Back button in the lower-right corner of the Create User page 
to return to the Security tab of the Web Site Administration tool. 
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Managing user accounts 




iage Users link on the Security tab provides a means of finding, 
?dlting^find deleting user accounts. Okay, when you have only a few user 
accounts to worry about, there's not much to "manage." But as your Web 
site grows, so will the number of user accounts you manage (that's the idea, 
anyway). 



Clicking the Manage Users link on the Security tab takes you to the page 
shown in Figure 3-11. There you can search for — and make changes to — 
user accounts. 



.net 



Click a row to select a user and then click Edit user to view or change the user's password or other properties. 
To assign roles to the selected user, select the appropriate check boxes on the right. 

To prevent a user from logging into your application but retain his or her information in your database, set the 
status to inactive by clearing the check box. 



Figure 3-11: 

Managing 
user 
accounts. 
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When you have lots of accounts to manage, use the options under "Search for 
Users" to locate any user account based on user name or e-mail address. As 
you're typing your search text, you can use the ? and * wildcards as follows: 

f" ? Matches any single character 
* Matches any number of characters 

For example, if you choose "E-mail" from the Search By drop-down list, enter 
*@aol.com as the text to search for, and click Find User, you'll see all users 
whose e-mail addresses end in @aol.com. 

Optionally, you can jump to any part of the alphabet by clicking any under- 
lined letter. To see all user accounts, click the AU link at the end of the alpha- 
bet. For example, if you perform a search that returns no results, you can 
click the All link and instantly re-display all user accounts. 
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After you find the account you want to change or delete, you can use the con- 
trols that are on the same row as the user name in the following manner: 



Jve check box: Choosing the check box identifies the account as 
Active. Clearing the check box makes the account inactive (though does 
not remove the account from the database). 

**" Edit user: Clicking this link takes you to a page where you can change 
the account name, e-mail address, and role memberships of the user. 

i>* Delete user: Deletes the user account. Unlike marking the account inac- 
tive, this option permanently removes the account from the database. 

t-«* Edit roles: Allows you to put the user into a role, or remove the user 
from a role. 

To return to the Security tab options when you've finished managing user 
accounts, click the Back button in the lower-right corner of the page. 



Closing the Web Site Administration toot 

As with any other program, you can open, use, and close the Web Site 
Administration tool whenever you need to. Closing the Web browser that's 
showing the Web Site Administration tool automatically closes the tool; 
you'll be back to the Visual Web Developer program window. 



What the Web Site Administration 
Toot Did 

Back in Visual Web Developer's program window, all that work you did in the 
Web Site Administration tool appears as three new items in Solution Explorer. 
One of those items is a new database named aspnetdb .mdf. To see its icon, 
click the + sign next to the App_Data folder in Solution Explorer, as shown 
in Figure 3-12. If you don't see that + sign, click the Refresh button in the 
Solution Explorer toolbar, or choose ViewORefresh from the menu bar. 

Down at the bottom of Solution Explorer is a new icon named web. conf ig. 
As its name implies, that file contains information about your site's general 
configuration. There's also a web . conf ig file in the MemberPages folder. 
That web. conf ig file contains code that prevents anonymous users from 
viewing pages in the MemberPages folder. 
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Figure 3-12: 
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There's no need for you to open either the aspnetdb . mdf or web . conf ig 
files. They're all part of the site's infrastructure and don't relate to anything 
that appears on Web pages in your site. 




A good general rule of thumb here is: If you don't know what something is, 
don't delete it, don't change it, don't rename it, and don't try to improve it by 
opening it up and hacking away at it cluelessly 



For now, we can consider the aspnetdb . mdf and web . conf ig files "technical 
stuff" that is best left alone. The important thing to understand, though, is that 
the site now has all the infrastructure a site needs to support membership. 

At the moment, there's no way to test that or to prove it. The site still needs 
a Login page so that you can log in and try things out. You'll create that page 
(Login . aspx) in Chapter 7. Furthermore, the MemberPages folder is still 
empty, so there's nothing to see in that folder. 

In other words, you are not finished building your Web site. Not by a long 
shot. There's plenty more to be done. In Chapter 4, you'll discover how to 
create another important infrastructure component: a Master Page. 



Chapter 4 

0< weating Master Pages 



In This Chapter 

Giving your site a professional look and feel 
Creating a Master Page 
Using Master Pages 

Adding Master Page content to existing pages 



I\ professional-quality Web site needs a consistent look and feel that lets 
v \ users know they're still in your site as they move from page to page. 
The site must also be easy to navigate so users can get around without get- 
ting lost. Master Pages are a great way to give your site that consistent look 
and feel, because they allow you to define content that appears on every 
page in your site. 

A Master Page lets you define a general format for all the pages in your site. 
For example, you might want a consistent header across the top of each 
page, to show your logo on each page. Or you might want a bar down the 
side of the page for displaying links and navigation controls. You might want 
a footer at the bottom of each page providing still more links. Or you may 
want a combination of header, sidebar, and footer. 

Figure 4-1 shows some general examples of layouts. The gray area on each 
page will be the same on every page in your site. The white area will be 
unique to each page. This chapter uses the middle example, in which you 
have a header and sidebar on each page. 



Figure 4-1: 

Examples of 
Master 
Page 
layouts. 
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footer 
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Creating a Folder (or Master Pages 
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ut a Master Page wherever you like within your site. In the interest 
of staying organized, you may want to create a regular folder just for master 
pages. To do so, right-click the site path at the top of Solution Explorer and 
choose New. Then give the folder a name. I named my folder Masters, as 
shown in Figure 4-2. 



Figure 4-2: 

Adding a 
new folder 
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Masters to 
the site. 
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Creating a Master Page 

Creating a new Master Page is similar to creating any other type of page in 
VWD. Here are the steps: 

1. In Solution Explorer, right-click the folder in which you want to place 
the Master Page and choose Add New Item. 

In my example I'd right-click my Masters folder. 

2. In the Add New Item dialog box, click Master Page. 

3. Enter a name for your page, or just accept the default name 

MasterPage . master. 

4. Choose a programming language. 

I use Visual C# in my own examples. 

5. Select the "Place code in separate file" check box. 

Figure 4-3 shows how the Add New Item dialog box might look at this 
point. 

6. Click the Add button. 
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Figure 4-3: 

Creating a 
Master 
Page. 
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A Master Page for Web Applications 
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MasterP age. master 
Visual C# 
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Add 



A blank Master Page opens in Source view. If you click the Design button at 
the bottom of the Design surface, you'll see a page with a ContentPlace 
Holder on it. That ContentPlaceHolder is the on-screen place where each 
page in your site appears. 



beslqmnq your paqe layout 

Before you add anything to the Master Page, you want to choose your layout. 
Here's how: 

1. From the VWD menu bar, choose LayoutOInsert Table. 

2. In the Insert Table dialog box that opens, choose Template. 

3. Choose a template from the drop-down list. 

For example, in Figure 4-4, I've chosen the Header and Side layout. 

4. Click OK. 

The Master Page is split into panes that reflect the options you choose. The 
ContentPlaceHolder will likely drop to the bottom of the page — perhaps 
out of view altogether until you scroll down through the page. In the design I 
chose, I wanted the content that's unique to each page to appear to the right 
of the side pane, not under the pane. So I needed to move the ContentPlace 
Holder control into the appropriate cell on the page. 
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Figure 4-4: 

Choosing a 
page layout. 
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Select a table template from the drop-down list or build your own custom table, 
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The page layout is really just an HTML table, and each "pane" is really just a 
table cell defined by a pair of HTML <td> and </td> tags. You can see that 
for yourself by clicking the Source button and viewing the HTML that defines 
the table. 

To move an object, like the ContentPlaceHolder control, in Design view, 
you can either drag it, or cut and paste it. Here I just need to scroll down to, 
and click, the ContentPlaceHolder control to select it. Then just drag the 
four-headed arrow that appears into the bottom-right table cell and release 
the mouse button. Figure 4-5 shows what happens when you move the 
ContentPlaceHolder under the header pane and beside the left pane. 



Figure 4-5: 
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Styling Master Page panes 

>Bocte 



e in the Master Page is actually just a table cell — a very bland table 
at each one has a white background and gray border. Even if you 
don't know exactly what you intend to put in each pane, you may want to 
size and color those panes and borders. 

Any time you want to style something on a page, the Style Builder is your best 
bet. For one reason, it's any easy way to style things. For another, it follows 
Cascading Style Sheets (CSS) specifications, which is a good thing from a tech- 
nical standpoint; these days, the trend is to use CSS to style everything in Web 
pages. 

CSS is an Internet standard for styling elements on Web pages. Chapter 6 dis- 
cusses CSS in some detail. But for the complete lowdown, see the official 
specification at www.w3 . org/style/css/. 

To get to the Style Builder, right-click the item you want to style and choose 
Style. For instance, to style the top pane of the Master Page, right-click within 
that pane and choose Style. The Style Builder shown in Figure 4-6 opens. 



Figure 4-6: 

The Style 
Builder. 
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Choosing a background color 

To choose a background color for the pane you're styling, click Background 
at the left side of the Style Builder, then choose a color from the Color 
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drop-down list. Or, click the Build button to the right of the Color drop-down 
list. Clicking the Build button opens the Color Picker dialog box, where you'll 
e colors to choose from. You can choose any color from any tab just 
g the color, and then clicking the OK button in the Color Picture 
dialog box. 



When you click OK, the Color Picker dialog box closes. The Style Builder then 
shows the name of the color you chose or its HTML code (like #f f f f cc). The 
Sample box at the bottom of the Style Builder shows the selected color, as 
shown in Figure 4-7. 



Style Builder 
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Setting text alignment defaults 

You can set a default horizontal and vertical alignment for text within the 
selected cell. At the left side of the Style Builder, click the Text option. Then 
use the Horizontal drop-down list to choose how you want text aligned within 
the cell. 

For example, when styling the top cell you might want to choose Left as the 
Horizontal alignment and Bottom as the Vertical alignment as shown in Figure 
4-8. Later, when you add text to the cell, that text will align to the left side of 
the cell and run along the bottom of the cell. 

Setting cell height and Width 

To set the height or width of the selected cell, click Position at the left side of 
the Style Builder. Then you can use the Height and Width options to set the 
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cell's height and width. When you're styling the top pane of a Master Page, 
you'll likely want to set the width to 100%, because the pane needs to be as 
he page. But you can set the width of the cell to any value you like, 
shows an example where I've set the height to 50 pixels and the 
width to 100%. 



Figure t-a: 
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Figure 4-9: 

Setting a 
height and 
width for the 
top cell. 
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Styting cet( borders 

Every table cell has borders around it that you can color. You can style all 
the borders so they're the same or you can style borders individually. To 
get started, first click Edges at the left side of the Style Builder. Then, under 
Borders, choose which borders you want to style. In this example, when 
styling the top pane of a Master Page, you'd likely choose Bottom to style 
the line along the bottom of that pane. 

Next, choose a style, width, and color from the respective drop-down list 
options. For example, if you want the line along the bottom of the top pane to 
be a little thicker and a little darker than the default gray line, choose Solid 
Line, Medium, and some dark color of your own choosing, as shown in Figure 
4-10. (The color #191970 is just a dark blue I chose for the sake of example. 
Feel free to choose any color you like.) 



Figure 4-10: 
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When you've finished making your selections in the Style Builder, click OK. 
The Style Builder closes and your selections are applied to the cell you 
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Styling the left pane 



The examples above work for the top pane of a Master Page. To style the left 
pane, right-click some empty space in that left pane and choose Style. Again, 
the Style Builder opens. But this time the selections you make are applied to 
the left pane only 

For example, maybe you want to change the background color in the left 
pane. To do so, click Background, then use the Color Builder to choose a dif- 
ferent color. In Figure 4-11, 1 chose a light blue, which shows up as #ccf f f f . 



Figure 4-11: 
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For text alignment in the left pane, click Text in the Style Builder. To center 
text in the left pane, and make it align toward the top of the pane, set the 
Horizontal and Vertical options to Centered and Top, respectively, as shown 
in Figure 4-12. 
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As a rule, you'll want the left pane's height to be equal to the height of the 
browser window. The width of that pane can be anything you like. To set the 
height and width, click Position in the Style Builder. Then set the height to 
100% and the width to however many pixels you think you'll need. If you're 
unsure, just pick any number — such as 50 pixels, as shown in Figure 4-13. 
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You might also want to style the right border of that left pane. To do so, click 
Edges in the Style Builder. Then choose Right as the edge to change. Choose 
a style, width, and color. Figure 4-14 shows an example where #191970 is 
again just a dark blue color I chose. You can use any color you like. 
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Click OK in the Style Builder to save your changes and apply them to the 
page. The left border then reflects the choices you made in the Style Builder. 



Styling the ContentPlaceHolder pane 

The pane that contains the ContentPlaceHolder doesn't really need to be 
styled in terms of color, width, or height, because the page that appears in 
place of the ContentPlaceHolder will eventually fill that pane completely 
However, if you start with the ContentPlaceHolder aligned to the top of its 
table cell, you may find it easier to work with Master Pages. To make that 
change to the Master Page, first right-click some empty space within the 
ContentPlaceHolder pane. Make sure the mouse pointer is in the same cell 
as the ContentPlaceHolder, but not on the ContentPlaceHolder as shown 
in Figure 4-15. Then choose Style from the menu that appears. 
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In the Style Builder, click on Text. Then choose Top as the Vertical alignment 
as shown in Figure 4-16. 
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You might find it useful to add some padding to the Content pane as well, 
because doing so provides a margin for content that will later appear in that 
pane. To pad the pane, click Edges in the Style Builder. Then set the Padding 
options to whatever you think is appropriate. For example, in Figure 4-17, 
I've set the padding inside that cell to 5 pixels all the way around. 
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Click OK in the Style Builder to apply your style choices. The ContentPlace 
Holder now aligns to the top of its cell. There's a small margin above and to 
f the ContentPlaceHolder because of the 5-pixel padding added in 
Builder. The top and left panes have the color and border styles you 
applied, as shown in Figure 4-18. (Here in the book, of course, the colors I 
chose show up as shades of gray.) 
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Figure 4-18: 

The Master 
Page after a 
bit of styling. 



Remember that Figure 4-18 is just an example: You can style things in your 
own Master Pages as you see fit. You haven't made any lifelong commitments 
here. If you change your mind about some stylistic setting you've made, just 
right-click the pane, choose Style, and use the Style Builder to choose what- 
ever style options you like. 

Eventually, you'll want to put some content (text, pictures, or whatever) into 
those panes. Keep in mind that whatever you put into those panes will be visi- 
ble on every page that uses the Master Page. But, at this early stage of the 
design and development process, just having a Master Page with the basic 
look and feel you want is sufficient. You can worry about specific content later. 
Right now your time is better spent getting a feel for how you use Master 
Pages. 

Before you can use a Master Page, you need to close and save it. Use the 
same technique you'd use to close any other item: Click the Close (X) button 
in the upper-right corner of the Design surface. 



Usinq a Master Paqe 

To use a Master Page, you must create a new Web Form. As you go through the 
process, choose the Select Master Page check box in the Add New Item dialog 
box. To try it out, create a simple page, perhaps named TestMember . aspx, by 
following these steps: 
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1. Right-click the site name at the top of Solution Explorer and choose 
Add New Item. 



pBooks 

3. In th 



e Add New Item window that opens, choose Web Form, 
the Name box, enter a name for the page. 

4. I'll use the name TestMaster . aspx because this is just a test page. 

5. Choose the Select Master Page check box as shown in Figure 4-19. 
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6. Click the Add button. 

7. In the Select a Master Page dialog box that opens, click the name of 
the folder that contains the Master Page (Masters, in this example). 
Then click the name of the Master Page you want to use, as shown in 
Figure 4-20. 

8. Click OK. 
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Note that the page doesn't look exactly as it will in a Web browser; every- 
thing on the Master Page is dimmed and uneditable. That's because in this 
, you want to create and edit only the content of this one page, not 
r Page content, which appears on many pages. 



The white area under the Content heading (which represents the Content 
PlaceHolder you see while creating the Master Page) is the only place you 
can compose your Web page. That white area is the content page, so named 
because it holds the content that's unique to the page you're creating right 
now. (As opposed to the Master Page, which shows content that appears on 
all pages that use the Master Page.) 

Creating a content page is no different from creating a page that gives you the 
whole page to work with. For example, within the content page, you can type, 
edit, and format text using all the usual tools and techniques, as described in 
Chapter 2. You can add pictures by dragging their icons from Solution Explorer 
onto the page as was also described in Chapter 2. You can add controls from 
the Toolbox to the page. (Later chapters detail adding controls, and more basic 
formatting techniques as well.) Figure 4-21 shows an example in which I typed 
and formatted some text in the content page. 
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Figure 4-21: 

New text in 
the content 
page. 
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Hello World! 

When you create a new page that uses a Master Page, use this Content 
placeholder to define your current content page. Stuff outside this 
white Content placeholder is from the Master page, and this is not the 
place to edit the Master page. This is the place where you create the 
content that's unique to this one page. 



Don't worry about the small size of the content page in these figures, or on 
your own screen. Likewise, don't worry about the width of the content page's 
left pane. Things will adjust automatically as you work. It's nothing to be 
alarmed about because what you see in the Design surface isn't exactly how 
things will look in the Web browser. 

When you've finished working on a content page, just close and save it as you 
would any other page. It will be placed in its folder with the usual . aspx 
extension. To get a better idea of how the page will actually look to people 
who visit your site, view the page in a Web browser. That is, right-click the 
page name (not the Master Page name) in Solution Explorer, as shown in 
Figure 4-22, and choose View in Browser. 
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Figure 4-22: 

About to 
view Test 
Master . 
aspx in a 
Web 
browser. 
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When the page opens in the browser, you'll see the panes from the Master 
Page above and to the left of the content page. At the moment, those panes 
are just strips of color (gray in Figure 4-23). But again, don't worry about the 
width of the panes or anything else. All that matters at this stage of the game 
is that you create a general layout for your Master Page, and understand how 
to use it when creating new pages. You can think about specific content later. 
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Figure 4-23: 

Test 
Master . 
aspx in a 
Web 
browser. 



Hello World! 

When you create a new page that uses a Master Page, use this Content 
placeholder to define your current content page. Stuff outside this 
white Content placeholder is from the Master page, and this is not the 
place to edit the Master page. This is the place where you create the 
content that's unique to this one page. 



When you've finished viewing the TestMaster page, close your Web browser 
to return to Visual Web Developer. 



Editing a Master Page 



You can put anything you want into a Master Page. But it's important to real- 
ize that any time you want to edit the Master Page, you have to open the 
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Master Page, not a page that just uses the Master. For example, to edit the 
Master Page created in this chapter, you'd double-click the MasterPage .master 
n near the mouse pointer in Figure 4-24. 



Figure 4-24: 

To edit a 
Master 
Page, 
double-click 
its name in 
Solution 
Explorer. 



Solution Explorer - C:\..,\MyVWDSite\ ? X 








<* C:\...\MyVWDSite\ 

i -ij App_Dete 
- _j Images 

, jj] Logo.gif 




9 □ Masters 

t . MasterPage. master 
ffi MemberPages ^ 
IS $ Default. aspx 
+ _j TestMaster.aspx 

]_J web.config 




. ,i Solution Explorer i Database Explorer 



When the page opens, you can add content to either the top or left pane as 
you see fit. The content can be anything — text, pictures, tables, controls, 
whatever. For example, to add a picture to the top-left pane of a Master Page, 
just drag a picture icon from Solution Explorer into the pane. Figure 4-25 
shows an example where I've dragged a picture named Logo . gif to the top 
page of my Master Page. 
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To add text to a pane, just click in the pane and type your text. After you've 
typed the text, you can select it and apply formatting as described back in 
Chapter 2. Figure 4-26 shows an example where I've typed the word welcome 
in the left pane. I then selected that text and choose the Heading 1 style from 
the Block Format drop-down list. 
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Figure 4-26: 
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You can also add any control from the Toolbox to a Master Page. (Controls in 
the Toolbox are discussed in Chapter 7.) For example, if you want people to 
be able to log in from any page in your site, you could add a Login control to 
the pane. It's just a simple matter of dragging the control from the Toolbox 
into the top or left pane of the Master Page, as illustrated in Figure 4-27. 
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As you add content to the left pane of the Master Page, the width of the pane 
changes to accommodate the content. Try not to let that bother you because 
it's not always a direct reflection of how things will look in a Web browser. 

After making your changes to the Web page, close and save it. Then, open 
any page that uses the Master. For example, after making the sample changes 
in the previous three figures and closing the Master Page, I right-clicked my 
TestMaster . aspx page and choose View in Browser. Figure 4-28 shows the 
result. 
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Figure 4-28: 

Test 
Master . 
aspx after 
adding 
content to 
Master 
Page . 
master. 
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Hello World! 

When you create a new page that uses a 
Master Page, use this Content placeholder 
to define your current content page. Stuff 
outside this white Content placeholder is 
from the Master page, and this is not the 
place to edit the Master page. This is the 
place where you create the content that's 
unique to this one page. 



I'll be the first person to admit that the page in Figure 4-27 is ugly. But I'm not 
suggesting you create your Master Page to look like the one in the figure. All 
that matters now is that you have a Master Page that you can use as you 
create new pages in your site. You can think about what specific things you'd 
like to put on your own Master Page later. 



^vMJE^ Visual Web Developer is mostly about creating the infrastructure for a 

dynamic, data-driven Web site. You can worry about making things "pretty" 
later in the process. Figure 4-28 is nothing more than an example of how you 
can put things into a Master Page. 



At this point, you do have a working Master Page, and you'll see more exam- 
ples of ways you can use it in upcoming chapters. 



Adding a Master Paqe to Existing Paqes 

If you've already created some pages in Visual Web Developer without speci- 
fying a Master Page, you can still get that content into a Master Page's 
Content area using simple copy-and-paste techniques. Actually, you already 
have a page that has no Master Page: the Default . aspx page that Visual 
Web Developer created automatically when you first created the Web site. 
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If you want the new page you're about to create to have the same name as 
the original page, you'll need to rename that original page first. To do so, 
k its name in Solution Explorer and choose Rename. Type a new 
fthout changing the . aspx extension) and press Enter. For example, 
you might rename Default . aspx to OriginalDef ault . aspx. 



Then, to copy and paste the stand-alone page's content into a new page's 
Content placeholder, follow these steps: 

1. Double-click the stand-alone page to open it. 

In my current example, that would be the OriginalDef ault . aspx page. 

2. If the page opens in Source view, click the Design button to switch to 
Design view. 

3. Select and copy everything in the page (press Ctrl+A, then press 
Ctrl+C). 

4. Right-click the site name at the top of Solution Explorer and choose 
Add New Item. 

5. In the Add New Item dialog box, choose Web Form, and make sure 
you also choose (check) the Select Master Page check box. 

6. Name the page whatever you like. 

Figure 4-29 shows an example where I'm about to create a new 

Default . aspx page. 

7. Click the Add button. 

8. In the Select a Master Page box, click the folder that contains the 
Master, then click the Master Page. 

For this example you'd click Masters in the left column, then click 
MasterPage .master in the right column. 
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9. Click OK. 

19. In the new page that opens, right-click the empty Content placeholder 
choose Paste. 



The copied content now appears in the Content placeholder. Now close and 
save the new page. To verify that things worked out as intended, view that 
page in a Web browser. Here, for instance, you'd right-click the new Default . 
aspx page in Solution Explorer and choose View in Browser. 



The page opens in the browser, showing both the Master Page and the con- 
tent you copied into its Content placeholder. Close the browser after check- 
ing things out. 

Assuming the new page works as intended, you don't need the original page 
anymore because its content is in the Content placeholder of the new page 
you created. To delete the original page (named OriginalDef ault . aspx in 
this example), right-click its name in Solution Explorer and choose Delete. 
Then choose Yes when asked for confirmation. 



The next chapter starts Part II of this book, which gets into the nitty-gritty 
details of creating individual pages that take advantage of the infrastructure 
elements you've defined. 



If pictures don't show in a Master Page 



When you choose View in Browser to view a 
page that uses a Master page, pictures in the 
Master page should show up in the browser. If 
you see a red X where the picture should be, 
you need to make a slight change to the Master 
page. Here's how: 

1. Close the browser, then double-click the 
Master Page in Solution Explorer to open it. 

2. With the Master Page open for editing, click 
the Source button at the bottom of the 
design surface to switch to Source view. 
Locate the <img . . . > tag for the picture, 
which should look something like this: 



<img src= ".. /Images/Logo . gif " /> 

3. Add runat= " server" to the <img> tag. 
Make sure there's a blank space before and 
after those new words and that the whole 
thing is inside the < and />tags as follows: 

<img src=" .. /Images/Logo. gif " 
runat= " server " /> 

4. Close and save the Master page. Then view 
in a browser any page that usesthe Master 
to verify that the picture works correctly. 
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In this part . . . 

I\ fter you've laid out the basic foundation of your data- 
w \ driven Web site, it's time to start creating pages. As 
you discover in this part, VWD pages use the same basic 
tools as any other Web page to format your site's content: 
HTML and CSS. Visual Web Developer also offers powerful 
ASP.NET controls that can do a lot more than HTML and 
CSS alone. In this part, you get a look at how all that fits 
together, and see an example of creating a control that 
makes your site easy for your visitors to navigate. 
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Creating and editing tables 
Adding hyperlinks to pages 
Adding and styling pictures 
Working in Source view 
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J\l° matter what program you use to create Web pages, you're actually 
# w creating a document that contains text and HTML tags. That's because 
all Web pages use HTML as a markup language. 



This chapter builds on Part I of this book, which focused on building the 
foundation of your Web site. With the foundation done, you can start creating 
content for individual Web pages. 

As you'll discover in this chapter, creating and editing Web pages in VWD is 
much like creating and editing word-processing documents — although some 
of the procedures differ from typing content into a program such as Microsoft 
Word or FrontPage. This chapter shows you what to look for, and covers all 
the basics of creating and editing pages in Visual Web Developer. 



Creating a NeuJ Blank Page 

Visual Web Developer offers you two types of Web pages to create: 

Web Forms: Can contain HTML and ASP.NET Server controls. The file- 
name extension is . aspx. 

]S HTML Pages: Can contain HTML but no ASP.NET controls. The filename 
extension is .html. 

So if you want your page to use any ASP.NET capabilities at all, even if you 
just want to use a Master Page with the page you're creating, you want to 
create a Web form. You would only use HTML to create pages that don't use a 
master, and don't use ASP.NET controls. 
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To create a new page, start in Solution Explorer. If you want to put the page in 
the root folder, right-click the site folder at the top of the Solution Explorer 
choose Add New Item. To put the page into a particular folder in 
■xplorer, right-click that folder's icon in Solution Explorer and 
chooseAdd New Item. Either way, the Add New Item dialog box opens. 



If you want to create an HTML page that doesn't use ASP.NET server controls, 
click the HTML Page icon. The programming-related controls, and the option 
to select a Master Page, are dimmed because you can't use those items in an 
HTML page. Just type the filename for your new page and click the Add 
button. The page opens in the Design surface ready for editing in either 
Design or Source view. 

To create a new . aspx page from the Add New Item dialog box, click Web 
Form; then choose your programming language, whether or not you want 
to put code in a separate file (you should always choose this option), and 
whether you want to include a Master Page. Then click the Add button. In 
Figure 5-1, for example, I'm about to create a new page named Login. aspx 
that uses C# as its programming language, places code behind the form, and 
uses a Master Page. 
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Figure 5-1: 

Creating a 
new .aspx 
page (Web 
form). 
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If you choose "Select master page," then clicking the Add button calls up a 
dialog box that asks which Master Page you want to use. Just click the name 
of the folder that contains the Master Page, click that page's name, and then 
click OK. 

If you opted to use a Master Page, you'll do all your work in the white Content 
box that appears on the page. Although the box doesn't look as large as a whole 
page, it grows to accommodate whatever you add. What's most important to 
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understand is that the techniques described in this chapter work the same 
whether you're creating an HTML page, a particular . aspx page without a 
r another . aspx page controlled by a Master Page. 



OOrtS 



After you have a page (whether . aspx or . html) open in the Design surface, 
use the Design and Source buttons at the bottom of the Design surface to 
switch between the WYSIWYG Design view and HTML Source view. 



Creating HTML Tables 

After you have a page open in Design view, creating the page is not too differ- 
ent from creating a document in a word processing program. Text flows as it 
would when typing a normal business letter. If you want to organize text into 
columns and rows, you can insert a table into the page and use its cells to 
organize content. 



Adding a table to a paqe 

You can add a table to any page (including the Content page in a page that 
uses a Master Page). One way to do so is as follows: 

1. In your page, click where you want to put the table. 

2. Choose LayoutOInsert Table from the menu bar. 

The Insert Table dialog box opens. 

3. Choose the Custom option. 

4. Specify the number of rows and columns you want. 

For example, in Figure 5-2 I'm about to create a table with two rows and 
two columns. 

5. Optionally, choose other formatting options under Layout and 
Attributes. 

Instead of choosing options in the Insert Table dialog box to format 
every table you create, you can use CSS to create a general style that 
applies to all tables. (Chapter 6 gives you the goods on CSS.) Here, it is 
sufficient to choose only the number or rows and columns you want. 

6. Click OK. 

An empty table with the number of rows and columns you specified 
appears on the page. 
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Figure 5-2: 

InsertTable 
dialog box. 
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If you have any experience at all with Microsoft Word or an HTML editor, 
you'll find there's nothing unique to working with text in table cells. To type 
in a cell, you just click the cell and start typing; Figure 5-3 shows where I've 
inserted a table with two rows and two columns. Then I typed a question into 
each of the top two cells. I widened each column by dragging its right border 
to the right until the text in the table cell no longer wrapped to two lines. 



Figure 5-3: 

Text typed 
into top two 
cells. 
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Working tiith HTML Tables 

You can change a table or its contents at any time. Options for managing the 
table as a whole, and for inserting and deleting columns, are on the Layout 
menu in the toolbar — but make sure you click somewhere inside the table 



Chapter 5: Creating Web Pages 



ipBook® 

then 



before you choose options from that menu. Here's a quick rundown of how to 
perform common tasks: 




a column: Click a column that will be next to the new column, and 
then choose LayoutOInsertOColumns to the Left or Columns to the 
Right. 

is* Add a row: Click a row that will be next to the new row, and then choose 
LayoutOInsertORows Above or Rows Below. 

i>* Insert a cell: Click the cell that's to the left or right of where you want 
the new cell to be placed. Then choose LayoutOInsertOCells to the Left 
or Cells to the Right. 

v 0 Delete an entire table: Click anywhere inside the table you've decided 
to delete. Then choose LayoutODeleteOTable. 

V Delete a column: Click in the column you want to remove and choose 
LayoutODeleteOColumn. 

i>* Delete a row: Click in the row you want to remove and choose LayoutO 
DeleteORow. 

V Delete a cell: Click the cell you want to remove and choose LayoutO 
DeleteOCell. 

t<" Resize a column: Drag the right border of the column left or right. Or, 
click in the column, choose LayoutOResizeOResize Column, set your 
width, and then click OK. 

t<" Resize a row: To make a row taller or shorter, drag its bottom border up 
or down. Or click the row, choose LayoutOResizeOResize Row, set the 
row height, and then click OK. 



As always, if you don't like a change you've made to a table, press Ctrl+Z or 
choose EditOUndo to undo that change. 



Selecting rotfs and columns 

You can change the appearance of any cell, or its contents, at any time. You 
can work with individual cells. Or, you can select multiple cells first, and then 
apply your change to all of the selected cells. 

There are several methods you can use. To select a column or row, first click 
in the column or row you want to select. Then right-click the cell and choose 
SelectOCoIumn or SelectORow. As an alternative to right-clicking, choose 
FormatOSelectOColumn or FormatOSelectORow. 
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You can also select a column by clicking its top border. Likewise, you can 
select a row by clicking its leftmost border. You have to get the tip of the 
pinter right on the border, so the mouse pointer turns to a little 
w first, like the example in Figure 5-4. Don't hold down the mouse 
button until you see the little black arrow. 



Figure 5-4: 

Little black 
mouse 
pointer for 
selecting 
table 
columns. 
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To select multiple columns, you can drag the little black mouse pointer left or 
right through the top border of other columns. Likewise, drag the little black 
arrow up and down to select multiple rows in the table. 

jjjjiMSE^ When you select multiple cells, one of the selected cells won't be gray. 

Instead it will be white with a black border like the top cell in Figure 5-4. 
That's normal. Don't drive yourself nuts trying the make the last selected 
cell gray. It's not necessary. 



Selecting celts 



To select a single cell, just click in the cell. To select multiple adjacent cells, 
drag the mouse pointer through the cells you want to select. To select multi- 
ple, nonadjacent cells, click in the first cell you want to select, and then hold 
down the Ctrl key as you click other cells. To deselect a single selected cell, 
Ctrl+Click that one selected cell. 



Most of the selected cells will be highlighted (grayed). But as when selecting 
rows and columns, one selected cell will be white with a black border. When 
using the Ctrl+Click method, the last cell you select with be the white one. 



Merging cells 

You can merge two or more cells to form a single large cell. For example, if 
you want to center a heading in the first row of the table, you can merge all of 
its cells so it's just one long cell across the table. Then you can type any text 
you like in that cell and center it above the table. 
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To merge cells, select the cells you want to combine into a single cell. Then 
right-click any selected cell and choose Merge Cells. For example, the top of 
shows three cells across a table selected. Just below that is the 
erging those three cells. 
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Figure 5-5: 

Merging all 
cells in a 
row. 
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Styling cetts 



When it comes to styling things in a Web site, there are lots of ways to go. But 
because the world seems to be gravitating toward a universal XHTML stan- 
dard, the Style Builder will be your best bet. First you have to make sure you 
know what you're about to style. Three rules apply: 



i>* To style a single cell, click that cell (the Properties sheet will show <td>, 
indicating that you're about to style a table cell. 

To style multiple cells, rows, or columns, select whatever you want to 
style. The Properties sheet won't show any tag when multiple items are 
selected. 

j*" To select the entire table, right-click a cell and choose SelectOTable. The 
Properties sheet shows a <table> tag, indicating that you're about to 
style the entire table. 

Then you can get to the Style Builder by using either of these methods: 

V Right-click the item or selection and choose Style. (If Style is disabled on 
the menu, use the next method instead.) 

Scroll down to, and click on, the style property in the Properties sheet, 
and then click the Build button that appears. 
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Either way, the Style Builder opens. Items down the left column represent dif- 
ferent things you can style, such as the font, background, text, position, and 
When you click a category name, the main pane to the right shows 
that category 



For example, suppose you selected the top row across a table. In the Font 
category of the Style Builder, you can choose a font family and style for text 
within those cells. Figure 5-6 shows the font set to Arial, its Color to Navy, its 
size to 12 points, and its weight to Boldface. The Sample Text at the bottom 
of the screen shows you how things will look when your selected options are 
applied. 



Figure 5-6: 

Some Font 
options 
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in Style 
Builder. 



Style Builder 

5r2 Font 

Background 
M Text 

Position 
J ^ Layout 
tB Edges 
■E Lists 
^Other 



Font name 

© Family: 

O System font : 

Font attributes 
Color : 



IB 



Navy 



(•) Specific; 
O Absolute: 



Small caps: 



BE 



Effects 



□ None 
O Underline 
| | Strikethrough 



Bold 






Capitalization: 




©Absolute: 
ORelative: 


Bold 


v 




Id 










Sample 


text 



To add a little background color to the selected cells, click Background in the 
Style Builder. Then click the Build (...) button. In the Color Picker that opens, 
click any color you like, and then click OK. The preview sample at the bottom 
of the style builder shows how your text will look against the background 
color you chose. 

To center text in all of the selected cells, click the Text category at the left 
side of the Style Builder, and then choose Centered from the Horizontal 
option under Alignment. To determine how text aligns vertically in a tall cell, 
choose either Top, Middle, or Bottom from the Vertical option under the 
Alignment heading. 

To style the borders around the selected cell(s), click the Edges button. Under 
Borders, select which borders you want to style. In Figure 5-7, for example, I 
opted to style only the Bottom border as a thin, navy-blue solid line. 



Chapter 5: Creating Web Pages 



35 Other 

ipEfbks 

| Styling tame n 



changed: 



Style: 



cell borders. 



When you've finished making your selections in the Style Builder, click OK. 
The items you styled take on the chosen new style. Figure 5-8 shows an exam- 
ple where the top two cells now have a background color and dark border 
along the bottom. The text in each cell is 12pt Arial Bold, and centered within 
each cell. 

Figure 5-8 also shows how the style property looks after clicking OK in the 
Style Builder. Your selections are converted to CSS formatting syntax. You can 
change the style at any time by clicking the style property again, and the 
Build button again. The Style Builder opens again, and you can make what- 
ever changes you want. 



Figure 5-8: 
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If you just want to format a small chunk of text within a cell, select that small 
chunk of text only. Then use the Formatting toolbar to apply a font, color, ital- 
ics, or whatever. 



Chapter 6 will get more into the Style Builder. For now, that should be enough 
to get you working with tables in the VWD Design surface. But there's one 
other thing I should mention about tables in this chapter. And that is . . . 
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Adding controls to table cells 



.creating an . aspx page, you can also add ASP.NET Web server con- 
able cells. Doing so couldn't be easier: You just drag the control from 
the Toolbox into a table cell. In Figure 5-9, for example, I dragged a Login 
control from the Toolbox into the table cell under the heading "Already a 
member?" 



Figure 5-9: 

Login 
control 
added to 
a table. 



Login.aspx Start Page 




There are no 
usable controls in 
this group. Drag 
an item onto this 
text to add it to 

the toolbox. 




Chapter 7 gives you more info on using and formatting ASP.NET controls like 
Login. 

So like I said, that's the basics of working with tables. Now, on to another 
common design element found in Web pages. 



Adding Hyperlinks to Pages 



There are many ways to add hyperlinks to pages in VWD. Here's a method for 
creating a link to any page on the Web: 

1. If you haven't already done so, type the text that you want to serve as 
the link. 

2. Select the text that will act as a link. 

In Figure 5-10, I've typed and selected the phrase "Sign up now!" 
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Figure 5-10: 

Selected 
text and 
Convert to 
Hyperlink 
button. 
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3. Click the Convert to Hyperlink button in the Formatting toolbar. 

In Figure 5-10, the mouse pointer is resting on the Convert to Hyperlink 
button. When you click this button, the Hyperlink dialog box appears. 

4. Choose the link's Type. 

For example, choose http: for a Web page. 

5. Type (or paste) the complete URL of the target Web page. 

6. Click OK. 

The selected text shows as blue and underlined. 

The blue-and-underlined text doesn't act as a link in VWD. To test the link, 
open the page in a Web browser. 



Quick links to pages in your site 

If you want to create a link to another page in your Web site, you can just 
drag that page's name from Solution Explorer onto the page. Initially, the 
text on the page will exactly match the filename of the page, as given here: 



Default.aspx 



To change the text of the link to something more meaningful than the file 
name, select the hyperlink text. Type your new text in its place. Changing the 
text of the link won't change the file to which the link refers. When you click 
the link to select it in your page, the Properties sheet will show an <a> tag 
(because all links are <a> tags in HTML). 
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Figure 5-11 shows an example where the cursor is in a link (Home). The 
Properties sheet shows an <a> tag, and the HRef property is the page that 
ill open (when used in a Web browser). 



Figure 5-11: 
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Creating bookmarks 

Your page can contain bookmarks, places that you can jump directly to from 
any link in the same page, or any link in any other page. To create a book- 
mark, click where you want to place the bookmark in your page, so the 
cursor is positioned where you want the bookmark to be. Then choose 
FormatCInsert Bookmark from the menu bar. Type in a name for your book- 
mark (for example, Top for a bookmark at the top of a page). Then click OK. 

You won't see any trace of the bookmark in Design view because bookmarks 
are not visible there (or in Web browsers). You can see the bookmark only in 
Source view, where it will be expressed in HTML and look something like this: 

<a name= " YourName" ></a> 

where YourName refers to whatever name you gave your bookmark. 



Unking to bookmarks 

To create a link to a bookmark from within the same page, follow these steps: 

1. Type the text of the link exactly as you would for creating a link to an 
external page. 

For more about this process, refer to the earlier section, "Adding 
Hyperlinks to Pages." 
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2. Select that text and click the Convert to Hyperlink toolbar button, 
the dialog box that opens, choose Other as the link type. 



he URL, type the bookmark name preceded by a pound sign (#). For 
instance, if you named a bookmark Top, you'd type #Top as the URL. 

When you click the link in Source view, the Properties sheet shows an 
<a> tag. The HRef property is the one whose name has a leading pound 
sign (for example, #Top). As with any link, you can't really test these out 
in the VWD Design view. You have to open the page in a browser to test 
your links. 



Adding and Styling Pictures 

The easiest way to include pictures in your Web site is to first get them into a 
folder in the VWD Solution Explorer. As discussed in Chapter 2, you can just 
drag the picture icons from any folder in Windows Explorer to any folder in 
Solution Explorer. 

To add a figure to your page, just drag the picture's icon from Solution 
Explorer onto your page. In Design view, the figure looks much as it will in 
a Web browser, though when it's selected on the page it will show borders 
that won't appear in the Web browser. 

To select a picture, click it. After it's selected, the picture appears framed 
with a border showing three dragging handles (as in Figure 5-12). Also, the 
Properties sheet displays an <img> tag; the Src (source) property will be the 
path to the image file, as is also shown in the figure. 
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picture interactively — changing its aspect ratio without distorting 
re — drag the handle in the lower-right corner of the selected pic- 
ture. To widen or narrow the picture without regard to aspect ratio, drag 
either of the other two handles. 



You can also set the height and the width, in pixels, using the Height and 
Width properties in the Properties sheet or the Style Builder. The Style 
Builder also offers options for controlling the position of the picture and its 
borders, so we'll look at those techniques next. 



Styling, pictures 

To style the picture, right-click it and choose Style, or, in the Properties 
sheet, click the style property (just under the Src property), then click the 
Build button that appears. The Style Builder opens. Options relevant to pic- 
tures are in the Layout and Edges categories of the Style Builder, as the next 
subsections show. 

Positioning pictures 

When you click the Position category in the Style Builder (Figure 5-13), you 
can choose any of the following options from the Position Mode drop-down 
list to position the image: 

V Position in normal flow: Anchors the figure to neighboring text so it 
sticks to the current paragraph. (This is the most common selection.) 

Offset from normal flow: Anchors the figure to the neighboring text, 
offset from where it would normally appear in the flow by whatever 
amount you specify in the Top and Left options. 

f Absolutely position: Anchors the figure to a specific place on the page, 
independent of text flow. 
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The Height and Width options let you set the height and width of the picture 
in pixels, points, percentage of the page width, or any other of several units 
re. 



The Top and Left options are enabled only if you choose "Offset from normal 
flow" or "Absolutely position." If you choose "Offset from normal flow," you 
can define the offset using Top and Left. For example, entering lOpx for Top 
and lOpx for Left would position the picture 10 pixels down and to the right 
of where it would have been positioned if you chose "Position in normal 
flow." 



If you choose "Absolutely position" from the Position Mode drop-down list, 
the Top and Left options define where the picture is placed relative to the 
upper-left corner of the page. For example, setting each measurement to lOpx 
would put the upper-left corner of the picture 10 pixels away from the upper- 
left corner of the page. 

The Z-Index option applies only to absolutely positioned objects, and defines 
the layer in which the object exists. The page itself is always layer 0. Objects 
at layer 1 can cover the page. Objects at level 2 can cover objects at level 1, 
and so forth, just like sheets of paper with the bottom sheet being layer 0. 




Note that anything at a lower layer will be covered by an object at a higher 
layer. So if you position a picture absolutely or offset it, there's a good chance 
that the picture will cover the text beneath it. Not good. 



Wrapping text around a picture 

For text that's positioned to flow with text (as opposed to positioning the 
images absolutely), click the Layout category name at the left side of the 
Style Builder. Then use the "Allow text to flow" option to set whether (and 
how) text flows around the figure. Your options, in a nutshell, are these: 

To the right: The picture aligns to the left margin and text flows to the 
right side of the picture, as in the top example in Figure 5-14. 

Don't allow text on sides: No text flows around the picture, as in the 
example in the center of Figure 5-14. 

To the left: The picture aligns to the right margin and text flows down 
the left side of the picture, as in the bottom of Figure 5-14. 



Bordering pictures 

To put a border around a picture, or to increase the distance between a pic- 
ture and the text that flows around it, use the Edges category in the Style 
Builder (Figure 5-15). In particular, you can use the Margins options to define 
the amount of space between the picture border and neighboring text. 
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Figure 5-14: 
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If you want to put a border around your picture, choose All from the "Select 
the edge to be changed" drop-down list. Then choose the style, width, and 
color of the border. Click OK, and the selected picture will take on the new 
style. 

Figure 5-16 shows an example that allows text to flow to the picture's right. 
The border around the picture comes from the selections under Borders in 
Figure 5-15. The gap between the picture border and the text to the right of 
the picture is defined by the 15 pixel right margin setting in Figure 5-15. 
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Why can't I center a picture? 



ryorjTe fa7ninar"WTrn HTML, you may be accus- 
tomed to using the align= attribute in <img> 
tags to align pictures. That attribute is being 
phased out in favor of using CSS styles to align 
pictures. To align a picture to the left or right 
margin, just choose the "To the left" or "To the 
right" option from the Allow Text To Flow drop- 
down list. To center a picture, enclose the 
<img>tag in a pairof <div>. . .</div>tags 
that have the text-align property set to Center, 
as follows: 



<div style= " text-align : center" > 

<img src= " Images /Laugh. gif " 
alt= " laughing" /> 

</div> 

You can type the required tags manually in 
Source view. (More on using the Source view a 
little later in this chapter.) 
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The picture to the left allows 
text to flow to its right. The 
picture has a thin solid black 
border. It also has a Right 
margin setting of 15 pixels. 
That Right margin setting defines the distance 
between the right side of the picture and the 
left side of this text that's flowing around the 
picture. 
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Padding pictures 

The Padding options in the Edges category define the amount of empty space 
between the picture and its outer border. For example, Figure 5-16 shows the 
border actually touching the bottom of the picture (the character's chin). 
Increasing the Padding options to 5 pixels or more would increase the size of 
the box (but not the picture in the box) to put more room between the picture 
and the border surrounding the picture. When you're done choosing options, 
click OK in the Style Builder. 




Choices you make in the Style Builder aren't set in concrete. If you don't like 
a change you've made, you can undo it by pressing Ctrl+Z. Or, just reopen the 
style builder and change whatever options you want. 
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nt to add a horizontal rule to a page, expand the HTML category in 
the Toolbox. Then drag a horizontal rule onto the page, as illustrated in 
Figure 5-17. To style the line after placing it on the page, right-click the line 
and choose Style. Then, in the Style Builder, use Style and Color options 
under the Borders heading to choose the line's appearance and color. 



Figure 5-17: 
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Editing in Source Viert 

Everything you do in Design view gets translated to HTML (as well as CSS and 
ASP.NET) in your page. When you click the Source button at the bottom of 
the Design surface, you see all the tags. If you're familiar with (and like work- 
ing in) HTML, you can add, change, and remove tags in Source view. 

When you click one member of a pair of tags, like <td> or </td> for table 
cells, or <p> or </p> for a paragraph, both the opening and closing tags for 
the pair are boldfaced. That lets you see immediately what's contained within 
the paired tags. 

When you're in Source view, you can use the + and - signs at the left side of 
the page to expand or collapse whole sections of the page. Doing so reduces 
clutter and allows you to focus on whatever portion of the page you're work- 
ing on. 
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select text and tags using all the standard techniques, such as drag- 
mouse pointer through whatever you want to select. After you've 
selected something, you can move it by dragging it, or delete it by pressing 
the Delete (Del) key. 

As you move the cursor about the page in Source view, tags that are near the 
cursor are represented by little buttons at the bottom of the Design surface. If 
you want to select a tag, its ending tag, and everything in between, just click 
the button. Or, right-click the button and choose Select Tag. 

Alternatively, you can select everything between a pair of tags, and exclude 
the opening and closing tags. To do so, click the right side of the button that 
represents the tag, as at the bottom of Figure 5-18. Then choose Select Tag 
Content. (The Select Tag option has the same effect as just clicking the 
button — it includes the opening and closing tags in the selection.) 
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Selection 
options on a 
button. 





Select Teg 

Select Tag Content 




iource <body> <dlv> 


■ table* <tr> <td> 


l<table> \ 



Typing tags and attributes 

If you know HTML (and CSS) well enough, you can edit your page right in 
Source view. To add a new tag, just position the cursor to where you want to 
place the tag, and start typing the tag. 

As soon as you start typing a tag, an IntelliSense menu appears, showing tags 
that match what you've typed so far. Rather than continue typing, you can 
double-click the tag name in the menu to finish what you've started typing. 

To add attributes to a tag by typing, get the cursor just to the right of the tag 
text (and inside the > bracket if there is one) and press the spacebar to insert 
a blank space. The IntelliSense menu changes to show acceptable attributes 
for the tag you're typing. Again, you can continue typing, or double-click a 
name in the IntelliSense menu. 
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If you're validating your tags against a current XHTML spec, many attributes 
that you may be accustomed to may not show up in the IntelliSense menu, 
cause XHTML has replaced many of the original attributes from 
ith CSS styles. When you use the Style Builder, you're actually adding 
CSS styles to your tags. 



As an alternative to using the Style Builder, you can type CSS styling attrib- 
utes right into the tag. Type style= (preceded by a blank space) into the tag. 
Then you can either just continue typing, or choose a CSS property from the 
IntelliSense menu that appears (Figure 5-19). 



Figure 5-19: 

IntelliSense 
menu. 




<div style=" 



'^i azimuth 



- </body> 
</html> 



5* background 

background-attachment 
background-color 
J background-image 
5* background-position 
5* background-repeat 

border 
[§P border-bottom 
^ border-bottom-color 



If you don't know a CSS from a cinderblock, don't worry about it at this point. 
Chapter 6 explains what CSS is about. 

If you don't remember the exact CSS property:value pair you want to type, 
you can still use the Style Builder to design the element. Here's how: 



1. First, make sure you click the tag you want to style, so the tag appears 
at the top of the Properties sheet. 

2. In the Properties sheet, click the style property, and click the Build 
button that appears. 

The Style Builder opens. 

3. In the Style Builder, choose your formatting options then click OK. 

As soon as the Style Builder closes, the appropriate style= text is 
added to the tag. For example, Figure 5-20 shows how a <div> tag would 
look after choosing Silver as the background color in the Style Builder. 



When you type the closing bracket of an opening paired tag, the closing tag 
for the pair is inserted automatically. For example, in Figure 5-20, the closing 
</div> tag was inserted automatically after I typed the closing angle bracket 
on the opening <div> tag. 
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To put text into the HTML element you just created, get the cursor right 
between the opening and closing tags. Then just start typing your text. Or, if 
you've already typed the text you want to put in the tag, just cut and paste it 
between the two tags. 



Debugging HTML 




All HTML and CSS that you type directly into Source view is validated against 
whatever version of HTML you've decided to use for your site. To review, 
or change, that selection, right-click any empty space in Source view and 
choose Formatting and Validation. In the Options dialog box that opens, 
click Validation under the Text Editor HTML heading. Then choose your 
HTML (or XHTML) preference from the Target drop-down list and click OK. 

VWD won't be too fussy about rules as you type in Source view. But if you've 
created any problems while editing, you'll know about them as soon as you 
click the Design button to switch to Design view. If there are any problems, 
you'll see a message saying you can't go to Design view until you fix those 
errors. All you can do is click OK to stay in Source view and try to correct 
your errors. 

If you haven't made any significant changes to the page, you can just close 
the page and choose No when asked about saving your changes. 

Any problems in a page that prevent you from switching from Source view to 
Design view are listed in the Error List pane below the Design surface, as in 
Figure 5-21. If that pane doesn't open, choose View O Error List from the 
menu bar to make it visible. 



The severity of each error is marked by an icon. Errors that are marked with 
a red X have to be fixed before you can switch to Design view. Errors marked 
as Warning or Message are more like "suggestions" than actual errors. 
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To quickly locate the source of an error, double-click its message in the Error 
list. The offending tag will be selected so you can make your change. 

If you're not already an XHTML expert, you may want to stay out of Source 
view altogether, and stick to designing your page in Design view. That way, 
you won't make any errors that have to be corrected manually. However, if 
you're serious about being a Web developer, learning XHTML should be high 
on your to-do list. Things will be much easier after you understand what's 
going on with all those tags in Source view. 
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In This Chapter 

Defining styles for your entire Web site 
Creating CSS style sheets 
Defining CSS style rules 
Linking style sheets to your pages 
Using CSS styles in your pages 
••••••••••••••••••••••••••••••••••••••••••••••••• 

;f you want your Web site to have a unique character and be easy for visi- 
tors to get around in, it's important to maintain a consistent look and feel 
throughout all pages in your site. This involves thinking about what kinds 
of design elements you might use in your site. Examples of design elements 
include things like main headings, subheadings, body text, tables, picture bor- 
ders, lines, and other items that might appear on pages throughout your site. 

To maintain a consistent look and feel, it's best to predefine the exact appear- 
ance of all these items in style sheets. Doing so up front saves you a lot of time 
because you don't have to style every single heading, table, and picture as 
you add it to your page. Instead, you just format things normally and they 
automatically take on the appropriate appearance as you create them. 

The real beauty of style sheets goes beyond consistency and ease of use to, 
well, preserving your sanity. If you ever decide to change the style of some 
element in your Web site, you don't have to go through every single page and 
make the change. You just change the style in the style sheet, and the new 
style is automatically displayed in every page. The technology you use to 
create style sheets goes by the name Cascading Style Sheets, or CSS for short. 



Understanding CSS 

CSS is a language that works in conjunction with HTML to define the exact 
appearance of any element in a Web page. You can use it in conjunction with 
the style= attribute in any HTML tag. When you choose options from the 
Style Builder introduced in earlier chapters, your selections get converted to 
a CSS style= attribute in the HTML tag. 
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If you want to give your site a consistent look and feel, you don't want to 
have to memorize and apply every style in every page. Instead, why not 
,e style once, in one place, and apply it everywhere? Now you're 
and that's where Cascading Style Sheets come into play. They are 
the "one place" you define your styles for all your site's pages to share. 



Before I talk about the sheets, let me talk about the "cascading." The explana- 
tions in the official specs are daunting, to say the least. So let's take it from the 
top. Most HTML tags define elements in your Web page, things like the body of 
the page (between <body> . . . </body> tags), headings (<hl> . . . </hl> tags), 
paragraphs (<p> . . . </p> tags), and so forth. Some tags are contained within 
other pairs of tags. For example, the heading and paragraph (and the tags that 
define them) are between the <body> and </body> tags. 



<body> 

<hl>I'm Heading</hl> 

<p>I am Paragraph. Heading and I are children of body.</p> 
</body> 



Here the heading and paragraph elements are both children of the body ele- 
ment, because they're contained within <body> and </body> tags. Like a 
family tree, the page body is the parent to the heading and paragraph ele- 
ments, because both of those elements are contained within its opening and 
closing tags. 

Now, suppose we use a CSS style to change the font of the body tag, as given 
here? What effect will that have? Behold: 



<body style="font-family: 'Monotype Corsiva'"> 
<hl>I'm Heading</hl> 

<p>I am Paragraph. Heading and I are children of body.</p> 
</body> 



The effect is that both the heading and the paragraph are shown in the 
Monotype Corsiva font in the Web browser. The reason is that both the <hl> 
and <p> tags inherit their default font from the parent element. Because the 
<body> element is the parent element to both the heading and paragraph, 
they both inherit its font style. 

That brings up the main reason for "Cascading" Style Sheets: Certain stylistic 
elements cascade down through child elements. There's an "unless otherwise 
specified in the child tag" addendum to that rule. In other words, if a child tag 
has its own style= attribute, than that one child's element overrides the 
inheritance. Suppose (for example) we style the <hl> tag like this: 



<body style="font-family: 'Monotype Corsiva' "> 

<hl style="font-family: 'Arial Black' ">I'm Heading</hl> 
<p>I am Paragraph. Heading and I are children of body.</p> 

</body> 
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When this code is viewed in a browser, the heading (only) is shown in the Arial 
Black font. The paragraph is still shown in the Monotype Corsiva font set in the 
ag. That's because the new style= " font-family: 'Arial Black'" 
irrode the inheritance for that one element (the heading) only. The 
paragraph, which is its own separate element, has no style= attribute and 
hence still inherits the font specified in its parent element, the page body. 



So, who wants to be bothered typing style= all over the place in HTML tags? 
Nobody. That's where style sheets come in. In the style sheet, you just define 
the rules of how each element will look, and all the elements take on the look 
you specified automatically. 

The style sheet is the place where you define these rules. You don't use normal 
HTML tags and style= attributes in style sheets. Instead, you define CSS rules 
by using a different syntax: You simply type the name of the element you're 
designing, and then specify its style in a pair of curly braces. Here's an example 
of a simple CSS rule in a style sheet: 



body { font- family : 'Bookman Old Style'} 



Of course, there are lots of buzzwords that go with CSS. So let me first point 
out that every CSS rule (including the example above) consists of two major 
components: 

IV 0 Selector: The name that appears to the left of the first curly brace. 
V Declaration: The text inside the curly braces. 

In the example given here, the selector is the word body and the declaration 
is font- family: 'Bookman Old Style '. In English, the rule says All pages 
in this Web site will use Bookman Old Style as the default font for body text (and 
everything that inherits the body tag's font). Brevity is the soul of CSS. 

The declaration describes a style using one or more property: value pairs 
in which a colon (:) separates the property name from its value. In the exam- 
ple just given, font- family is the property and 'Bookman Old Style' is 
the value of that property. 

A rule can contain multiple property .- value pairs, provided you separate 
them with semicolons (;). The rule shown in Figure 6-1, for example, has two 
property : value pairs in its declaration. 



Selector Declaration 
Figure 6-1: i | 

naa pic body (font-family: 'Bookman Old Style'; font-size: 12pt ) 

CSS style | | | | 

ru ' e ' Property Value Property Value 



100 Part II: Building Your Web Site 



DropBoote 

For exam 



Rules don't have to be defined across a single line like the above example. In 
fact, VWD automatically arranges rules so each rule's property /value pair 
pn a separate line. This makes it easier to see what's in the rule. 



For example, here's yet another rule for the body style that defines the font 
type, font size, and background color for the page: 



body 
{ 

font-size: 12pt; 

f ont- family : 'Bookman Old Style'; 
color: navy 



In the above example, the selector is on one line. The declaration is broken 
into five lines so you can clearly see the braces and the property: value 
pairs. 

In VWD, you can create style sheets without knowing all the selectors, prop- 
erties, and values, because you don't have to type anything. You can create 
your styles using the Style Builder instead. (Thank goodness.) First, you have 
to create a style sheet in which to put your CSS rules. The next section tells 
you how. 



Creating a CSS Style Sheet 

Creating a style sheet in VWD is fairly easy. If you want to keep your style 
sheets in a specific folder, you can start by right-clicking the project folder 
and the top of Solution Explorer and choosing New Folder. Name the folder 
whatever you like (I'll name mine, oh, what the heck, StyleSheets) and press 
Enter. Then, to create a new style sheet, follow these steps: 

1. In Solution Explorer, right-click the folder in which you want to place 
the style sheet and choose Add New Item. 

2. In the Add New Item dialog box, click Style Sheet. 

3. In the Name box, type a name for your style sheet. 

In Figure 6-2 I've named mine MyStyles . ess. 

4. Click Add. 

A new style sheet opens in the CSS Editor, at first just showing an empty 
rule for defining the style of the HTML body tag. The Style Sheet toolbar 
also opens, as shown at the top of Figure 6-3. 




If your CSS toolbar doesn't open somewhere, choose ViewOToolbarsO 
Style Sheet from the menu bar. 
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If you're already into CSS and have a preference, you can use the drop-down 
list on the Style Sheet toolbar to choose with which version of CSS you want 
your sheet to comply If you don't have a preference and just want to go with 
the latest version, choose CSS 2.1 (as in Figure 6-3). 



Creating Style Rules 

A style sheet can contain any number of rules — of several different types. 
The sections that follow look at the different types of rules and how to create 
them. 



Creating CSS element stytes 

A CSS element style is a rule that defines the style of a built-in HTML tag like 
<p> or <body> or <hl>. These rules are the easiest to create and the easiest 
to use (in most cases). The predefined elements cover most of the design ele- 
ments needed for a Web page. So rather than reinvent the wheel, you can set 
a style for those elements and just use the elements as you would normally. 
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k the Add Style Rule button in the CSS toolbar, or right-click in the 
style sheet and choose Add Style Rule. 



The Add Style Rule dialog box opens. 

2. Choose Element, and then choose the HTML element for which you 
want to design a style. 

In Figure 6-4, 1 chose the hi element, allowing me to define the style of all 
text marked with <hl> . . . </hl> tags in my pages. 

3. Click OK. 



A rule selector appears with empty curly braces, as in the example given here: 

HI 

{ 

} 



Figure 6-4: 

Defining 
a style rule 
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element. 



Add Style Rule 1 

Define a new style rule by adding at least one element, class, or ID'd element. Additional 
elements, classes, and ID'd elements can be combined to create a hierarchy. 



©Element: 



Style rule hierarchy: 



Uass name: 



Optional element 
O Element ID: 



Style rule preview: 



_OK | Cancel | 



With the selector and curly braces in place, you can use the Style Builder 
described later in this chapter to define the style of the element. 




If you already have a style sheet from a previous Web site, you can just copy 
and paste that sheet's contents into the new sheet you've created in VWD. 



Creating CSS class selectors 

You don't have to apply a style to all instances of an HTML element. You can 
create "special circumstance" rules that are applied only as needed. For exam- 
ple, you might have to create two types of tags for table cells: one for regular 
table cells, and one for the column headings across the top row of the table. 
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To create "special circumstance" rules, you define CSS class selectors. Unlike 
an element selector, a class selector doesn't have to match an HTML tag. You 
,the class selector any name you want — just avoid using spaces and 
ion in the name. Keep it short and simple. 



You create a class selector as you would an element selector. Click the Add 
Style Rule button or right-click the page and choose Add Style Rule. In the 
Add Style Rule dialog box, choose Class Name. Then type the name of the 
class in the text box, as in the example shown in Figure 6-5. 



O Element: 



Figure 6-5: 

Creating a 
CSS class 
selector. 



0 Class name: 
Mono 

□ Optional element: 



Click OK, and the class appears in the style sheet looking like this: 



.Mono 

{ 

} 











The leading dot that VWD adds to your name isn't actually part of the name. 
It's just a signal to the Web browser, indicating that the name that follows the 
dot is a class name rather than an HTML element. 



You can also assign a style class to a particular HTML element, and use that 
style class with only certain instances of the element. For example, you might 
create a div (division) class that creates sidebar text, similar to the sidebars 
you see in this book. In a style sheet, you create such a selector by joining 
the HTML element name (the same name you use inside an HTML tag) fol- 
lowed by a dot and whatever name you decide to give your class. 

Again, you use the Add Style Rule dialog box to create the rule. Choose Class 
Name and type in a name of your own choosing for the class. Then select the 
Optional Element check box, and choose an HTML element from the drop- 
down list. For example, in Figure 6-6, I'm about to create a new CSS class 
named Div.BoxedText. 

Click OK, and the result is as follows: 

Div.BoxedText 

{ 

} 
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Now all that's left to do is make sure the cursor is between the curly braces, 
and use the Style Builder to define the style of the rule. The next section tells 
you how. 



Defining Rules vOith Stifle Builder 

Manually typing the declaration for a rule isn't easy. The syntax rules are strict, 
and there are a lot of property names to remember. The Style Builder offers a 
much better alternative. The first step, or course, is to create the selector (you 
know — the name and curly braces). The next step is actually two: 

1. Position the cursor just to the right of the opening curly brace of the 
selector you want to style. 

2. Click the Build Style button in the Style Sheet toolbar, or right-click 
near the cursor and choose Build Style. 

In Figure 6-7, for example, I'm about to build a style for the body{ ) selec- 
tor in MyStyles . ess. 
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After you've chosen Build Style, the Style Builder dialog box opens. 
Figure 6-8 shows the top half of the Style Builder. Here you can add all 
the styles you like. 
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5wn lists you encounter in 
the Style Builder will have a <not set> option, 
like the Italics drop-down list in Figure 6-8. It 
may seem odd that you have the choice to set 
an option to "not set," but there is a reason for 
it: If you previously set the option to a specific 
setting, choosing <not set> ensures thatthe 
old setting is removed. 



In the rule that the Style Builder creates, you 
won't see <not set> anywhere because 
choosing <not set> removes the property: 
value pair from the rule. That means the ele- 
ment you're styling will inherit the style from its 
parent element. 
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The sections that follow discuss the most commonly used options in the 
Style Builder. As with HTML, CSS is a book-length topic in its own; an exhaus- 
tive discussion of styles would surpass my page count (and probably your 
patience). But a quick tour of the most common style options can give you a 
sense of how you might use them in your own Web sites. Stay tuned. 

For more information about the options in the Style Builder category you're 
viewing, press Help (Fl). 



Stqiinq fonts 



The Font category of the Style Builder lets you define the font of the selector 
(the item you're styling). It's important to know that fonts come from the 
client computer, not from your computer. In the person doesn't have the font 
specified in your CSS rule, their Web browser will automatically substitute 
another font. 



To gain some control over how the client PC chooses substitute fonts, specify 
multiple fonts in order of preference. Generic fonts are good for this purpose, 
because they allow the client PC to choose a font that at least resembles your 
preferred font. To specify fonts in the Style Builder, choose Family under Font 
Name in the Style Builder. Then click the Build button. 



Part II: Building Your Web Site 




A generic font is just a general font style without a specific typeface. For 
example, Arial and Helvetica are both sans-serif fonts used for headlines. If 
jify Arial as the preferred font, and sans-serif as the Generic font, 
I be used wherever possible. Otherwise, Helvetica (or some other 
sans-serif font) will be used instead. 



example, , 
f^ciu*^ 1 



In the Font Picker, first choose the font you most prefer, and then click the >> 
button to move that font name to the Selected Fonts list. Any additional fonts 
you choose after the first will be used only if your preferred font isn't avail- 
able on the client PC. Figure 6-9 shows an example in which I've chosen 
Bookman Old Style as the preferred font, and a generic Serif font as the alter- 
nate. Click OK after making your selections. 



Figure 6-9: 
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To choose a color for your font, pick a color name from the Color drop-down 
list. Or click the Build button to the right of the color option. In the Color 
Picker dialog box that opens, click any tab, and then choose your color and 
click OK. 



There are several ways to size a font: 



is* Set a specific size, in points (or some other unit of measure): You might 
want to do this when defining the default font for body text (in the body { } 
selector in the style sheet). To set a specific size, choose Specific. Then 
type in a size and choose your unit of measure. 

v 0 Set an absolute size: This option defines the size as a value, ranging 
from XX-small to XX-large. The exact size of the text, in points, is defined 
by settings in the visitor's Web browser. 

Absolute sizes are defined by the visitor's Web browser, with Medium 
being equal to body text size. The exact size varies. For example, in 
Microsoft Internet Explorer you can choose ViewOText Size to set a 
general size for all text on the page. Text you define using an Absolute 
size will be sized according to which Text Size a visitor chooses from 
that menu. 
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To get a sense of how the absolute sizes vary relative to one another, 
choose Choose a Size from the Absolute drop-down list. The sample text 
e bottom of Style Builder shows you an example of your choice. 




relative size: This defines the size of the text relative to neighbor- 
ing inline text, either smaller or larger. 

Relative size refers to the size of the parent element's size. The parent 
element is usually text in the same sentence of a paragraph. This setting 
makes the text a little smaller, or a little larger, than whatever size that 
neighboring text happens to be. 



The option for boldface reflects XHTML's preference for using the CSS 
font -weight property rather than <b> . . . </b> tags for boldface. You can 
choose how bold you want boldface to be using that property. If you want the 
standard boldface, choose Bold from the Absolute drop-down list. Otherwise 
choose Relative and then choose either Lighter or Bolder. 



By and large, the other items in the Fonts category are self-explanatory. If 
they still seem a little obscure, just choose one and have a look at its preview 
sample at the bottom of the Style Builder. 



Styling the background 

You can choose a background color or picture for the item you're designing. 
Optionally, you can choose a picture to use as a watermark for the background. 
Click Background in the Style Builder to get to the Background options. 

A watermark is a pale image that appears to be imprinted on the page, behind 
text and other items on the page. 

To specify a background color, choose a color name from the Background 
Color drop-down list. Or click the Build button next to the Color option and 
choose a color from the Color Picker. 

If you have a picture you'd like to use as a watermark, click the Build button 
next to the Image option and choose the picture you want to use. If it's a 
small picture like a logo, you can choose a Tiling option to have the image 
repeated down, across, or all over the page. The scrolling options let you 
choose whether the background image scrolls with text, or remains fixed as 
the text scrolls over the image. 

The Position options determine the starting position of the background 
image. The effect of the Position option depends on how the Tiling option is 
set. The preview at the bottom of the Style Builder shows how your current 
selections will look on a page. Figure 6-10 shows an example with a back- 
ground color, image, and some image options selected. The preview shows 
how those selections look. 
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Figure 6-10: 
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In Figure 6-10, the background color shows through the background image 
because that image file has a transparent background. If you use a picture 
with an opaque background and tile that image in all directions, its back- 
ground will hide whatever color you choose for the page background. 



The options in the Background category of the Style Builder relate directly 
to the CSS properties that control background — color, background- 
image, background-repeat, background-position, and background- 
attachment. 



Styling text alignment and spacing 

Clicking the Text button in the Style Builder takes you to styling options for 
text (Figure 6-1 1). Under the Alignment heading, the Horizontal option lets 
you choose how you want the text, or item, aligned between the margins of 
the parent object. For example, if you're styling a table cell (<td> element), 
and set the horizontal alignment to Center, any text or picture you place in 
the cell is centered within the cell. 

The Vertical alignment option offers several settings, not all of which apply to 
all types of elements. The sub and superscript elements, for example, 
apply to inline text only. Thus, they only apply to inline elements — those 
that don't cause text, a picture, or a table to start on a new line. Examples of 
inline elements that don't cause line breaks include <b> . . . </b> for boldface, 
as well as <em>. . .</em> and <span>. . .</span>. 
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Figure 6-11: 
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In Figure 6-12, the top two lines show examples of using superscript and 
sub vertical alignments. The superscript alignment raises the text from the 
normal flow. The sub alignment lowers it, as in a subscript. 
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Unlike the HTML <sup> and <sub> tags, the vertical alignment options don't 
change the size of text. They change only its position relative to other text in 
the same line. 
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If you're styling an <img> tag used to show a very tiny picture, use the 
text-top, baseline, and text-bottom vertical alignment options; these give the 
precise vertical position relative to inline text. The middle example 
6-12 shows examples of vertically positioning a tiny happy-face 

image. 



If you're styling a block element that contains text and has some height to it, 
use the Top, Middle, and Bottom vertical alignment options to align text 
within the box. In Figure 6-12, the Top, Middle, and Bottom vertical alignment 
options are applied to cells in a table where the row is three lines tall. 

^jjMSE^ When you're styling a table, keep inheritance — the relationship between 
parent and child tables — in mind. Any alignment options that you want to 
apply to the table as a whole should be defined in the table element (the 
<table> tag in HTML), because each cell in the table is a child element, 
defined by <td> tags, within the table. Therefore, any style you define for the 
table will be inherited by all cells in the table. 

Of course, you can always override the style in any cell or group of cells. 
When you change the setting of a single cell, you do so only for that one cell, 
that one <td> tag. Other cells still inherit the characteristics of the parent 
<table> tag. 

The spacing and flow options in the Text category of the Style Builder are 
largely self-explanatory. As soon as you choose an option, the preview sample 
given here shows you the effects of your choice. The words "Normal Text" in 
the preview never change, so you can compare the results of any change you 
make to that text. If you don't like a change you've made, choose <not set> 
to cancel your selection, or delete whatever you typed into an option. 



Styling position 

The Position category of Style Builder, shown in Figure 6-13, offers options for 
sizing and positioning pictures (the <img> tag), tables (the <table> tag), and 
block elements that contain text like the <div> . . . </div> (division) tags. 



Figure 6-13: 
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From the Position Mode drop-down list, you can choose from the following 
options: 




jtion in normal flow: The element is "glued" to its neighboring text 
(usually a paragraph). When the paragraph moves, the text moves with 
it. This is the default for most blocks; they end up in normal flow if you 
don't specify otherwise in a style. 

The "palm tree" and "laughing kid" pictures in Figures 5-14 and 5-16 of 
Chapter 5 are in <img> tags that are positioned in normal flow. 

V Offset from normal flow: Same as above, but the item can be offset 
from its default position. Choosing this option enables the Top and Left 
options; use those to specify the offset. For example, entering lOpx for 
Top and 5px for Left would move the element down 10 pixels and 5 
pixels to the right, where it would have been positioned by default. 

Absolutely position: Places the block at a specific position on the page. 
The block is not "glued" to any neighboring text. When you insert or 
delete text above the block, text below that point moves around the 
object rather than dragging the block with it. 

Choosing the Absolute position options enables the Top and Left options. 
Use them to define where you want to place the upper-left corner on the 
page. You can express the measurement in pixels, percent, points, or what- 
ever is most convenient for you. 

For example, if you absolutely position the top of a block element to 40%, and 
the left to lOpx, the top-left corner of the block will be 40% of the distance to 
the bottom of the page, and 10 pixels away from the left margin. The block 
won't change position as you add or delete text above it. 

If you choose Absolute position, you can also set a Z-Index for the block. A Z- 
Index is a number that defines the layer on which a block element is placed. 
Think of a stack of paper, with each sheet of paper as a layer. The sheet at the 
bottom of the stack is at layer 0 (or Z-Index 0). The next sheet up is at layer 
1 (Z-Index 1), and covers the sheet below it. The next sheet up is at layer 3 
(Z-Index 2), and it covers layers below it. 

Using Z-Indexes is tricky, because items with Z-Indexes greater than zero 
can cover content on your page. That sort of thing can really bother visitors 
who are trying to read your page. So you want to stay away from setting any 
Z-Index unless you have a specialized application for it in your site. 

The Height and Width options in the Style Builder Position options let you 
define the size of the image, table, or other block element you're styling. You 
can define the size in pixels, a percent of the page width (or height), or any of 
several other units of measure. 
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Styling layout 



out category of the Style Builder, you find options that control how 
appear on your page in relation to one another. Some are beyond 
the scope of this book. But the first three Flow Control options (shown in 
Figure 6-14) are right up our alley. 
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i>* Visibility: This option controls whether or not the block is visible on the 
page. For instance, you might want to make an element initially invisible, 
and then have it appear when the visitor clicks a link or button. The 
Visibility options are Hidden (the element isn't visible on the page) 
and Visible (the element is visible). The <not set> option is the same 
as Visible. 

i>* Display: This option determines whether the item is displayed as a 
block element or inflow element. If treated as a block element, the item 
is placed in its own box on the page, like a table or image. If treated as 
an inflow element, the style is applied inline. Boldface and italics are 
good examples of inline elements. Both apply their styles to text without 
disrupting the flow of text. 

f Do Not Display: This option omits the element from the page altogether — 
but it's not the same as the Invisible option (which sends the element to 
the client PC but hides it from view, perhaps temporarily). The Do Not 
Display option prevents the element from being sent to the browser. 
That reduces the download time. A good example would be sending con- 
tent to visitors selectively, based on the capabilities of the visitor's Web 
browser. 

i>* Allow Text To Flow: These options determine whether (and where) text 
flows around the block element you're styling. Figure 5-14 in Chapter 5 
showed an example using images. You have three basic choices: 

• Choosing Do Not Allow Text On Sides prevents any text from wrap- 
ping around the element. The element appears on its own line. 

• Choosing To The Right causes the element to align to the left 
margin, so text can flow down the right side of the element (as with 
the laughing boy in Figure 5-16 in Chapter 5). 
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• Choosing To The Left causes the item to align to the right margin, 
so text can flow down its left border. 

J^^Jnt a really thorough description of CSS layout properties, see 
Chapters 8 through 10 in the CSS 2.1 spec at www.w3 .org/TR/css2l. 



Styling boxes and borders 

Many design elements, like pictures, tables, and chunks of text enclosed in 
<div> . . . </div> tags, form boxes on your page. The Edges category in Style 
Builder allows you to define the spacing outside the box, inside the box, and 
the appearance of the borders around the box. If you're defining the style of a 
box that contains text or an image, the settings apply as follows: 

Margins: Defines the margins outside of the box (how near neighboring 
text can get to the box). 

Padding: Defines margins inside the box (how near text inside the box 
can get to the box border). 

V Borders: Defines the style, width, and color of the border surrounding 
the box. 

Figure 6-15 illustrates where the Margins and Padding settings apply to a box 
that contains text. 



Padding Border 



Margin 



Figure 6-15: 

Margins, 
padding, 
and borders 
for a box. 
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This is text in a box defined 
nby <div>...<div> tags. The 
margins inside this box are 
from the Padding options 
in the Edges category of 
the Style Builder. 



A table's margins are, in effect, little gaps between cells, as shown in Figure 
6-16. The padding puts space between a cell's inner border and the contents 
of the cell. The Borders options control what kind of lines go around the table 
and between the cells. 
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Figure 6-16: 

Margins, 
padding, 
and borders 
for a table. 
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When designing borders, you can choose to define all the borders at once, or 
just the left, right, top, or bottom margin. 

You can also collapse the vertical borders in a table so there's only one line 
and no gap between cells vertically This only works if you're defining the 
style characteristics of a table element (that is, using a <table> tag). To col- 
lapse vertical borders in the table, click Other in left column of the Style 
Builder. Then, under the Tables heading, choose Collapse Cell Borders from 
the Tables drop-down list. 



Sai/inq Style Builder choices 

When you've finished choosing options from the Style Builder, just click OK. 
Your selections are translated into appropriate CSS property: value pairs and 
inserted between the curly braces for the rule. Here's a general example: 

DlV.BoxedText 
{ 

border-right: navy thin solid; 
padding-right: 25px; 
border-top: navy thin solid; 
padding-left: 25px; 
float: left; 
padding-bottom: 2 5px; 
margin: Opx 2 5px 15px Opx; 
border-left: navy thin solid; 
padding- top: 2 5px; 
border-bottom: navy thin solid; 
width: 3 0%; 

background-color: #ffffcc; 

} 

To change your selections, right-click anywhere between the curly braces 
and choose Style Builder again. Make your changes and click OK. Remember, 
your style sheet can contain as many, or as few, style rules as you like. 
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All those property: value pairs that Style Builder creates are straight from 
the online CSS specification, available at www.w3 .org/TR/css2l. 



oks 

SaVinq a CSS style sheet 



When you've finished working with a style sheet, just close and save it as you 
would any other document. The styles you defined won't be applied to any- 
thing until you link the style sheet to a page (or Master Page), as discussed 
next. 



Linking to a Style Sheet 

The rules you create in a CSS style sheet are applied only to the pages to 
which you link the sheet. If you've created a Master Page, you can link the 
style sheet to the Master Page. The styles automatically carry over to all con- 
tent pages that use the Master Page. 

The easy way to link to a style sheet is just to drag its icon from Solution 
Explorer into the page you're editing. For example, to add a CSS link to a 
Master Page, you simply open the Master Page (by double-clicking its icon in 
Solution Explorer), drag the CSS file's icon from Solution Explorer to the 
upper-left corner of the page you're editing, and drop it there. 

Figure 6-17 shows an example: I'm dragging a style sheet named 
MyStyles . ess into an open Master Page named MasterPage .master. 



Masters /MasterPagcmaster* 



Figure 6-17: 
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To use your style sheet in an HTML page (or an . aspx page that doesn't use 
the master), just open that page in Design view and drag the style sheet's 
icon from Solution Explorer onto the page. 
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Unless there are styles in the style sheet that apply to tags already in the 
Master Page, you won't notice any difference. But if you switch to Source 
11 see that VWD has inserted a link to the style sheet between the 
nd </head> tags near the top of the page. That link will look some- 
thing like this example: 



<link href =".. / Stylesheets /MyStyles . ess" rel=" stylesheet" type="text/css" /> 

Keep in mind that only pages that have that tag near the top use the styles in 
the style sheet. If you create a new page from scratch, and don't specify a 
Master, drag the CSS file over to the page to create the link. 



Using Styles in a Page 

After you've linked a style sheet to a page, HTML element styles will be for- 
matted automatically. For example, if you styled the body{ } element, then 
body text in the page takes on the style you defined immediately. 



As you format text in the page, any new styles will come into play as you use 
the element. For example, let's say you created a style for Heading 1 elements 
in your CSS style sheet, like this: 















HI 

{ 

font-size: 1 
f ont- family : 
font-style : 

} 


6pt; 

'Arial Black' ; 
italic; 







Any text in the document that is already formatted as HI will automatically 
be displayed in the new style. That is, any text between the <hl> and </hl> 
tags in the Web page will be displayed in 16 point Arial Black italic font. 



Exactly how you use a style rule to format new or existing content on the 
page depends on which type of selector defines the rule. I'll start with the 
easiest one, in which the selector's name matches an HTML tag (for example, 
as hi or body). 



Applying CSS element selectors 

A CSS element selector is any CSS rule whose name does not contain a dot. 
The name of the selector matches the name inside the HTML tags of the ele- 
ment. Applying such a selector takes no real effort at all. You just apply the 
element as you normally would. 
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For example, suppose the currently linked CSS style sheet contains the hi 
style shown earlier. In the current document, you select a chunk of text, and 
ose the Heading 1 style from the Block Format drop-down list on the 
g toolbar, as in Figure 6-18. The style is applied to the selected text. 
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In Source view, the formatted text is contained in the usual pair of HTML tags, 
like this: 

<hl>Hello World</hl> 

The words Hello world take on the formatting defined by the HI style rule 
in the style sheet. You don't have to do anything special to make that happen. 
The connection between <hl> in the page and the hi { . . . } style in the style 
sheet is built-in and automatic. If you change the hi { } style rule in the style 
sheet, the change shows up in all pages automatically. 



Applying CSS class selectors 



CSS class selectors aren't associated with any particular HTML element. In a 
style sheet, their names are preceded by a dot, as in this . Mono class selector: 



.Mono 




{ 




font-family: 'Courier New' 


, Monospace; 


font-style: normal; 




color: navy; 




} 
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Using CSS class selectors in VWD is a bit of a pain, because their names don't 
show up in IntelliSense menus or any drop-downs anywhere. You have to 
=r the names and type them yourself. For an inline style like the 
jample, your best bet would be to enclose the text to be formatted in 
<span> . . . </span> tags in Source view and specify the class name in the 
<span> tag, as follows: 



<span class= "Mono "> text to format goes iiere</span> 

Note that within the <span> tag you don't include the leading dot, just the 
name. The class name must be enclosed in single or double quotation marks. 



You'll need to work directly in Source view to type the tags. But it will be easi- 
est to find the text if you first select that text in Design view. For example, 
let's say in Figure 6-19 you want to display the sample code let x = 10 in 
monospace. First, select that text as shown in Figure 6-19 by dragging the 
mouse pointer through only that text. 



Figure 6-19: 

Selecting 
text in 
Design 
view. 
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font. So you need to apply the .Mono style to only the sample line 
without distrupung the flow of the text in the paragraph. 



To switch to Source view, click the Source button at the bottom of the Design 
surface. The text you selected in Design view is still selected in Source view, 
making it a little easier to find among all the other stuff that appears in 
Source view. 

Next, click a space just to the left of the first character you want to format, 
then manually type in the <span> tag, as follows: 

<span class = "Mono"> 

VWD automatically adds the closing </span> tag right after the opening tag. 
You need to move that closing tag so that it's after the text to which you want 
to apply the style. A simple way to do that would be to cut and paste the text 
so that it's between the two tags. For example, in Figure 6-20 I've moved the 
sample code let x = 10 so it's between the < span 
class="Mono">. . .</span> tags. 
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Figure 6-20: 
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When you switch back to Design view, only the text within the tags will be for- 
matted with the Mono style. 




If you switch to Design view and the text isn't formatted as expected, either 
you forgot to link the style sheet to the current page, or you misspelled the 
class name in the Style tag. 



Applying element class selectors 

Element class selectors have a dot embedded in the name. The first part of 
the name defines which tag you use to apply the style. For example, here is 
an element-class selector named ColHead that can only be applied to table 
cells (<td> tags). 

TD. ColHead 
{ 

font-weight: bold; 
f ont- family : Arial; 
background-color: #ffffcc; 
border-bottom: navy thin solid; 

} 

To use an element class like td . Colhead, you have to apply the class to text 
that's already formatted by the HTML element, td in this example. Because 
<td> . . . </td> tags define table cells, you have to start, in Design view, by 
clicking on text that's already in a table cell. 

You can take a shortcut and select the items you want to format. For exam- 
ple, to apply the td . ColHead class selector to all the cells in a row, select the 
row as in the example at the top of Figure 6-21. The Properties sheet won't 
show a tag name when you have multiple elements selected. But you can still 
type the class name, ColHead, in the Class property for the selection, as in 
the center of that same figure. Press the Tab key to complete the entry, and 
the selected cells will take on the style, as in the bottom of that same figure. 
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Uslnq bW styles 

It's worth mentioning the HTML <div> . . . </div> tags at this point, because 
they're relevant to CSS styles. A div is a box or "division" of text, set off from 
the normal flow of body text. 

The <div> tag is to block styles what <span> is to inline styles. An empty 
pair of <div> . . . </div> tags creates a new box in which you can place text, 
tables, pictures, or whatever. However, text inside the box inherits its font 
and virtually everything else from its parent element, most likely the <body> 
tag for the page. 

The main reasons I mention the <div> element is because many of the old 
ways of aligning things — for instance, the align= attribute — are being 
phased out in favor of using <div> tags. 

As an alternative to manually creating and formatting a pair of <div> . . . </div> 
tags each time you put a centered element on a page, you could create a CSS 
style that already defines how you want centered elements to appear on the 
page. For example, the CSS style below, named div. Centered, ensures that 
any element between its tags is centered on the page, and that no text flows 
around the centered element. 

DIV. Centered 
{ 

background-color: transparent; 
text-align: center; 
width: 100%; 
float: none; 
clear: both; 

} 
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In the Style Builder you'd choose the following categories and options: 



ipBoo 




ground: Choose Transparent. 

Choose Horizontal, Centered. 

u* Position: Choose Width property and set it to 100%. 

f Layout: Set Allow Text To Flow to Don't Allow Text On Sides. Set Allow 
Floating Objects to Do Not Allow. 

To use the style in a linked page, first make sure the page you're editing is 
linked to the style sheet. Then drag the HTML Div control from the toolbox 
onto the page. An empty box appears and <div> appears at the top of the 
Properties sheet. Type the class name into the Class property, and press 
Tab. The box won't change immediately. Figure 6-22 illustrates the procedure. 
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To center an image on the page, drag its icon from Solution Explorer into the 
box. To center a table on the page, click inside the box before you choose 
LayoutOInsert Table from the menu bar. Then create the table normally. 

In the VWD Design view, the <div> box will be visible as gray lines around 
the object inside. But in the Web browser, no such lines are visible and the 
item is just centered on the page. 

In the HTML for the page, a picture appears as an <img> tag within <div> 
tags as in the following example: 

<div class="Centered"> 

<img src= " Images/Laugh . gif " alt="Ha Hah" /> 
</div> 
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ter has been about using CSS style sheets in VWD, presuming you're 
at least vaguely familiar with CSS already. There's not enough room in this 
book to cover the entire CSS specification. That's a topic in itself you could 
learn in a class, from a book, or from the online specification and tutorials. 

Like the HTML specs, the CSS specs are available at the World Wide Web 
Consortium Web site at www.w3c . org/. The following short list shows pages 
specifically relevant to CSS 2.1. Check them out. Any time you invest in learn- 
ing CSS is time well spent. 

f" Starting with HTML + CSS: www. w3 . org/Style/Examples/011/ 
f irstcss 

*** Introduction to CSS 2.1: www. w3 . org/TR/CSS21/intro .html 
\y CSS 2.1 Specification: www . w3 . org/TR/css2i/ 
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In This Chapter 

What is ASP.NET, anyway? 

Using server controls in your pages 

Allowing users to create their own accounts 

Creating a login page 

Letting users change their passwords 



The big difference between creating a regular Web site with HTML and a 
dynamic Web site with Visual Web Developer mostly boils down to 
ASP.NET controls. ASP stands for Active Server Pages. The .NET refers to the 
Microsoft .NET Framework, the home of thousands of controls for all types of 
programmers, not just Web developers. 

Some readers may already know what all that means and what it's all about; 
some may not. For those who don't, we start this chapter with a quick 
overview of ASP.NET and why it's important for Web developers. 



What Is ASP.NET> 

Glad you asked. ASP.NET is essentially a set of controls for a building 
dynamic, data-driven Web site. To understand what that means, let's start 
with a (hopefully familiar) example of searching the Web using a search 
engine like Google. 

Suppose you go to www. google . com, type in something like 1966 Ford Mustang 
convertible parts, and press Enter. A moment later, Google sends back a page 
with links to a bunch of Web sites that contain those words (not to mention 
quite a few relevant ads). Where did that page come from? How does that 
work? 
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Certainly Google didn't have a Web page already made up and waiting, just in 
case someone happened to search for "1966 Ford Mustang convertible parts", 
a near infinite number of word combinations that people might 
. And there's no way to create a near infinite number of Web pages 
cover every conceivable combination of words people might search for. 




Instead, Google's Web server has to take whatever words a user submits, 
search its database of 8 billion or so links for pages that contain those words, 
then create a page that contains appropriate links to send to the user's Web 
browser. 

In other words, Google's Web server had to take an active role in creating the 
page it sent to your Web browser. 

That is the very essence of a dynamic, data-driven Web site. The pages that 
Google sends out from its Web server are dynamic in that each page contains 
only links that match the words the user searched for. Those results are data- 
driven in that all those links are stored in a database at Google's site. 

I'm not saying the Google was created with Visual Web Developer. Google was 
created long before Visual Web Developer existed. But the concept of having 
the Web server take an active role in creating a Web page is all that matters for 
this analogy. Likewise, we won't be building a search engine in this book. The 
only analogy that matters is the fact that Google's Web server plays an active 
role in creating the Web pages that get sent to people who conduct searches. 

Making your Web server take an active role in creating the pages it sends is 
what ASP.NET is all about. Active Server Pages (Web pages with an . aspx 
extension) are basically Web pages that contain Active Server Controls. But 
you can't send pages that contain server controls directly to clients; clients 
can't execute server controls. The server uses data from the database and 
information in the . aspx page to determine exactly what HTML is needed on 
the client PC. Then the server creates the appropriate page and sends it to 
the client. Figure 7-1 illustrates the basic idea. 
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The .NET Framework is an enormous collection of tools for programmers 
(and, like "the world and all it contains," not a subject we have to get into 
). Suffice it to say that all ASP.NET Web server controls you find in 
members of the .NET Framework. And as such, complete documen- 
tation about any server control is available from the .NET Framework online 
documentation. 



In Visual Web Developer, the Toolbox shows the names of commonly used 
.NET Server controls, categorized into groups like Data, Validation, Navigation, 
Login, and so forth. These tools are visible only when you're editing a Web 
form (. aspx page). The server controls are hidden when you're editing an 
. html page. 



Adding a Server Control to a Paqe 

Adding a server control to a page is pretty simple: You drag its name from the 
Toolbox onto your page. You can put server controls on a blank . aspx page, in 
Master Pages, or in the content placeholder in a page that uses a Master Page. 

The size and complexity of server controls ranges from a tiny link on a page 
with a few properties to multipage wizards consisting of many smaller con- 
trols and many properties, and every size in between. Despite the differences 
among server controls, there are some commonalities in how you work with 
them. Those commonalities are what this chapter is mostly about. 

As mentioned, adding a server control to a page is simple: You just drag its 
name from the Toolbox to wherever you want to place it on the page. In 
Figure 7-2, for example, I've created a page named Login . aspx and placed a 
table (along with some text) on the page. In the figure, I've just dragged a 
Login control from the Toolbox into the lower-right cell of the table. 



Figure 7-2: 
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a view, clicking an ASP.NET control selects the control. The Properties 
ows the name and properties of the control. The Properties sheet in 
Figure 7-3 shows an example in which a Login control is selected. The name 
of the control is Loginl. 



Figure 7-3: 
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Controls in the .NET Framework are organized into a hierarchical namespace, 
a place to keep them that works much the same way as the hierarchical orga- 
nization of the folders on your hard disk that keep your files. In the Properties 
sheet of Figure 7-3, System. Web. ui .WebControls .Login is the full name of 
the Login control within the .NET Framework namespace. 



You can design some elements of an ASP.NET control using the Style Builder. 
Just right-click the control and choose Style, or click the control so its name 
shows at the top of the Properties sheet. Then click the style property and 
the Build button that appears. The Style Builder opens, and you can choose 
items as you would for any normal HTML control. 

For example, to change the size of the text in the Loginl control, scroll down 
its properties list and click the + sign next to the Font property. Then click 
the size property and choose a relative size like Medium. 



ASP.NET controls are converted to HTML before they're sent to the server. 
Element styles like table and td (for table cells) are applied to the HTML 
automatically. So don't knock yourself out trying to design an ASP.NET con- 
trol in Design view until you've had a chance to see how it looks in a Web 
browser. 
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The Style Builder won't work for all parts of an ASP.NET control. If you want 
to fine-tune every single element in a control, you have to convert it to a tem- 
jt. This is done on the Common Tasks menu you'll find on ASP.NET 
pntrols. This menu is explored more fully in the next few sections. 



Using the Common Tasks menu 

In Design view, when you select (click) a server control, you see a tiny arrow 
button somewhere on its border. Clicking that tiny button opens the control's 
Common Tasks menu. In Figure 7-3, for example, I've clicked the little arrow 
button for a Login control on a page in Design view. 

The exact options on a Common Tasks menu vary from one server control 
type to the next. But some options, such as 

is* Auto Format 
v 0 Convert to Template 
i>* Administer Website 
v 0 Edit Templates 

are so common they deserve further mention. The next few sections discuss 
these options in greater detail. 

Using Auto Format 

The easiest option on the Common Tasks menu is Auto Format. Clicking that 
button takes you to an Auto Format dialog box, where you see a list of 
scheme names and a preview window. When you click a scheme name, the 
preview shows you how the scheme looks. 

If you find a scheme you like, just click OK to select it. Or, if you don't want to 
use a scheme and just want to use the default control appearance, click 
Remove Formatting, then click OK. 

In Figure 7-4, 1 chose Auto FormatOClassic scheme, and clicked OK. The 
Login control takes on the Classic scheme (it's blue on the screen, not gray). 
The change is also reflected in the control's BackColor, BorderColor, and 
other properties. 

In the Properties sheet, values in boldface are recent. This serves as a good 
reminder that you can Undo them with Ctrl+Z or EditOUndo. 
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Converting a control to a template 

By looking at the Login control shown back in Figure 7-4, you can conclude 
that it must be made of several smaller controls. After all, it contains text, 
boxes, and a button, all neatly aligned. Where are those individual controls, 
and what if you want to change one? 

The answer lies in converting the control from an individual control to a 
template. As its name implies, the template defines the exact content and 
position of each item that makes up the control. 

When you choose Convert to Template, a complex visual control like Login is 
divided into its individual components. Then, the "Convert to Template" 
option on the Common Tasks menu is replaced with a Reset option. 

The Reset option undoes changes you've made to the template before con- 
verting it back to a single control. Don't click Reset if you intend to keep 
changes you've made in a template. 

Within the template, each control has its own tiny arrow button — so tiny 
you practically need a microscope to see it. Fortunately, you don't have to 
click the tiny O button. It's just there to identify the upper-left corner of each 
control in the template. Click anywhere on a control to select it. Figure 7-5 
shows an example in which I've clicked the Log In button in the template. 

To select multiple controls, click the first one, then hold down the Ctrl key as 
you click others. 



The Properties sheet, as always, shows the name and properties of the 
selected control. Because it's a server control, it won't have the usual HTML 
tag name in angle brackets. You can change any property of the control in the 
usual manner. For example, to change the text that appears on the selected 
button, change the button's Text property. 
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Red text in a template represents text that appears in the browser only under 
special circumstances, such as when the user fails to fill in a required text 
box. You don't have to change any of the red text, it's just a temporary place- 
holder for normal text that will appear in the Web browser. 

Administering the Web site 

The Administer Website option on the Common Tasks menu is just a shortcut 
to the Web Site Administration Tool discussed in Chapter 3. There's really no 
need to switch to that tool, though. The link is only there as a convenience in 
case you want to check, or maybe change, current user accounts, roles, or 
access rules. 

Editing templates 

The Common Tasks menu of some server controls includes an Edit Templates 
option. For example, the multipage CreateUserWizard template described a 
little later in this chapter has an Edit Templates option on its Common Tasks 
menu. Clicking that option takes you to a template-editing window that has 
its own Common Tasks menu. From the Templates Common Tasks menu, you 
can choose which template (that is, which portion of the control) you want 
to style. Figure 7-6 shows an example where I chose Edit Templates from its 
common tasks menu after dragging a CreateUserWizard control onto a page. 
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You can treat the template like a Web page in the sense that you can type text 
in the template or add controls to the template. If you're not sure where a 
template appears in a control, type in some random descriptive text. If you're 
editing a Header template, for example, type in "I am the Header Template." 
Then choose End Template Editing from the Common Tasks menu for the 
template. Afterwards, you'll see the control in its normal appearance, and the 
text you typed into the template appears within that control. 

A big part of using server controls in a Web site is knowing how the control 
looks and acts in a Web browser. And to do that, use some controls in some 
pages. Because you went to great trouble in Chapter 4 of this book to config- 
ure your Web site to support member logins, I'll start by looking at some of 
the Login controls that you can use with that foundation. 



ASP.NET Login Controls 

Visual Web Developer supports several ASP.NET 2.0 controls that you can use 
to manage logins through your Web pages. They only work if you've already 
configured your site to support membership, as discussed in Chapter 4. You 
can use them in any Web Form (. aspx page). In the Toolbox for an . aspx page, 
you'll find all the Login controls under the Login heading, as in Figure 7-7. 

Here's a quick overview of what each Login control is for: 

Pointer: Not really a Login control. If you click a control and then change 
your mind and want to get back to the normal mouse pointer, click this 
Pointer item. 

Login: Presents a control that allows users to log into their accounts 
with their user name and password. 

v 0 Login View: Lets you show different stuff to different users based on 
whether they're anonymous or logged in. 
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f PasswordRecovery: As the name implies, presents fields that allow a 
user to recover a forgotten password. 



nStatus: Displays a Login link to anonymous users, or a Logout link 
thenticated users. 



LoginName: Displays nothing to an anonymous user; displays an authen- 
ticated user's login name. 

V CreateUserWizard: Provides a fill-in-the-blanks form for creating a new 
user account. Use it in your Web sites to allow people to create their 
own accounts. 

f" ChangePassword: Provides a form that allows a user to change his or 
her password. 

You can use all of these controls anywhere in any . aspx page, any Master 
Page, as well as in the Content placeholder of a page that uses a master. The 
next few sections discuss these controls more fully. I'll start with the 

CreateUserWizard control. 
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Attouring Users to Create art Account 

If your site will allow anyone to create an account, you need a page that 
allows users to enter the appropriate data. The CreateUserWizard control is 
just the ticket to do this because it displays on a Web page all the fields 
needed for a user to create an account. 
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To create a new page for the control, right-click the site folder or subfolder in 
Solution Explorer and choose Add New Item. Choose Web Form and fill in the 
you see fit. I named mine CreateAcct . aspx. The other options are 
p to you. I chose Visual C# as the language, as I routinely have in the 
other examples in this book, and selected the Place Code In Separate File 
option. I also used the Master Page described in Chapter 4 in my example. 



Anyway, after you've created (or opened) a page, just drag a CreateUserWizard 
tool from the Login category of the Toolbox onto the page (or drag it into the 
Content placeholder in a Master Page). If you like, use the Auto Format 
option on the Common Tasks menu to style the form. 

Figure 7-8 shows an example in which I've added a CreateUserWizard control 
to the Content placeholder on a page. I also used Auto Format on the Common 
Tasks menu to set the scheme to Classic, making the control easier to see. 
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If you want to keep life simple, just close and save the page. You don't really 
have to do anything else to the control, all the stuff it needs to validate the 
user's entries, store the user's data in the SQL Server database, and so forth, 
is already done. 

If you want to customize the control later, you can do so at any time. It has a 
Common Tasks menu, templates, and so forth. You can press Help (Fl) for 
help while customizing the control. 
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teuserwizard control doesn't automatically assign a new user to a 
>u want to put all the people who sign up through the CreateUser 
wizard control into a specific role, add a little code. I know I haven't talked 
about code in this book, and now is not the time to get into details of writing 
code. However, for this example, I can just show you what to type. 

This technique only works if you've already enabled Roles in the Web Site 
Administration Tool as discussed in Chapter 3. Also, you'll have to remember 
exactly how you spelled your role name, as it won't appear in any IntelliSense 
menu. 

If you want your CreateUserWizard control to automatically assign every 
new user to a specific role in your site, follow these steps: 

1. In design view, select the CreateUserWizard control. 
Its name appears in the Properties sheet when selected. 

2. In the Properties sheet, click the Events (lightning bolt) button. 

3. Double-click the CreatedUser event. 

You're taken to the code-behind page for the page you're designing; the 
cursor is already in the event procedure, right where you type its code. 

4. Type the following at the cursor position, substituting your own data 
for the italics, as follows: 

Roles . AddUserToRole (ctrlName . UserName, " roleName" ) ; 

ctrlName refers to the name of your CreateUserWizard control. That 
would likely be CreateUserWizardl if you let VWD name the control. 
When you type a rol eName, make sure you spell it exactly as you did 
when creating the role in the Web Site Administration Tool. 

The code given here shows what my example looked like after adding a 
line of code to add the new user to my SiteMembers role. 

protected void CreateUserWizardl_CreatedUser (object sender, EventArgs e) 
{ 

Roles .AddUserToRole (CreateUserWizardl .UserName, "SiteMembers" ) ; 

) 

Typing code isn't like typing in English. In code you have to get every 
dot, comma, parenthesis, quotation mark, and semicolon exactly right. 
Spelling and blank spaces count a lot too. The code won't work if you 
don't type the line exactly right. 

5. Close and save the code-behind page. 
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ydWaRW rboK cfffhe whole Properties sheet 
for the CreateUserWizard control, you'll see 
it has many properties. You can figure out what 
most properties are just by looking at their 
names and values. 

A couple of noteworthy properties include 

ContinueDestinationPageURL and Login 
CreatedUser. You can set the Continue 



DestinationPageURL propertyto whatever 
page you want to have open when the user 
clicks Continue after successfully creating an 
account. The LoginCreatedUser property 
determines whether or notthe user is logged in 
automatically after creating the account. The 
default is True, the user is logged in. 



Testing the control 



After you close and save the new page, you can take the CreateUserWizard 
control for a test drive. Just right-click the page's name (CreateAcct . aspx in 
my example) in Solution Explorer, and choose View in Browser. When the 
page opens, you should be able to create a new user account You'll have to 
remember the user name and password to test the account later. 




Figure 7-9 shows an example of a user account (in the Web browser) with the 
user name Testy. The hypothetical data you enter needs to be realistic 
enough to pass all the tests that the control imposes. For example, if the 
passwords don't match, you'll get an error message in the control and won't 
be able to create the account. 

Don't forget that your password needs to be at least seven characters long, 
and must include a non-alphanumeric character. For example, password! 
(with the exclamation point) is an acceptable (if rather obvious) choice. 
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When the control contains reasonable data for a hypothetical user account, 
click the Create User button. You should see a "Your account has been suc- 
cessfully created" message and a Continue button. At this point there's no 
place to continue to, so you can just close the Web browser to return to VWD. 
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To verify that the process worked, you can choose Website O ASP.NET 
Configuration from the menu bar to open the Web Site Administration Tool. 

Security tab, and then click Manage Users. The new user should be 
ou added code to add the user to a role, click the Edit Roles link for 
that user. The check box should be filled already, indicating that the user is in 
the role. 



When you have a way for users to create an account on your site, the next 
thing they need is a way to log in with their user names and passwords. 
That's where the Login control comes into play. 



Creating a Login Page 

People who have already created accounts at your site need a place to sign 
in. Some of the other Login controls assume that page is in the site's root 
folder and named Login, aspx. So if you haven't already done so, you should 
create that page now by following the usual steps: 

1. In Solution Explorer, right-click the site folder at the top of the folder 
hierarchy and choose Add New Item. 

2. In the Add New Item dialog box, choose Web Form. 

3. Name the page Login . aspx. 

4. Choose C# as the language and choose Place Code In Separate File. 

Whether or not you choose to use a Master Page is entirely up to you. 

5. Click the Add button. 

If you opted to use a Master Page, click the Master Page's folder, and 
then click the Master Page filename and click OK. 



I created my Login page using a table with two rows and two columns, and 
typed in a couple column headings as described in Chapter 5. 1 dragged the 
Login control from the Toolbox into the lower-right cell. I used its Common 
Tasks menu to apply the Classic scheme. Figure 7-10 shows the Login tool 
(highlighted in the Toolbox) and a Login control placed under the "Already a 
Member?" heading in a table. 

In the cell to the left of the Login control, I typed the Sign Up Now! text and 
selected it. Then I used the Convert to Hyperlink button in the toolbar to 
browse to the CreateAcct . aspx page I created previously. (In the Hyperlink 
dialog box, the Type appears as (other) and the URL as the name of the 
page.) Click OK, and the page offers non-members a way to create an account 
right now. 
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To align text in a table cell, right-click the cell and choose Style. Click Text in 
the Style Builder, set the Horizontal and Vertical Alignment, and click OK. To 
widen a column beyond what you can do by dragging, right-click some empty 
space in a cell in the column and choose Resize O Resize Column. Then, 
increase the current width, choose All Cells, and click OK. 

Like all ASP.NET controls, the Login control has a Common Tasks menu, as 
you saw earlier in this chapter. However, everything there is optional. All you 
really have to do is close and save the page on which you placed the control. 

To test the login page, right-click its name Login . aspx in Solution Explorer and 
choose View in Browser. To verify that the control works, type in a valid user 
name and password. An invalid user name and password is rejected. A valid 
entry takes you to the default page for the site. But that's fine for now; there's 
no way to verify right now if you're logged in or not anyway. This brings me to 
some other Login controls. (Don't forget to close the Web browser.) 



Providing a Login Link 

There's no telling which page in your site a user might first encounter. A link 
from a search engine could take a user to any page. To make your site easy to 
use, you need a login link on every page. An easy way to provide this is to put 
a link to the Login . aspx page into the Master Page for your site. 



But a regular link that always showed Login would be confusing for people 
who have already logged in. The link should show Logout or something else 
for people who are already logged in. That's where the LoginStatus control 
comes in. 
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The LoqinStatus control 

The easiest way to provide a Login/Logout link is to drag a Logins tatus con- 
trol to a Master Page. That's all you really have to do, besides close and save 
the Master Page. 

Then, right-click any page that uses the Master Page and choose View in 
Browser. In the browser, clicking the Login link should take you to Login, 
aspx. If you enter a valid user name and password, as in Figure 7-11, and click 
Log In, you'll be logged in. If your Default . aspx page uses the Master Page, 
you'll see that the link has changed from Login to Logout, because you're 
logged in. 
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If you see a Logout link, click it to log out. You won't be taken to another 
page. You'll simply be logged out and the control will again show Login. Close 
the Web browser. If all of that works, you have all the basic stuff for a mem- 
bership site: a way to sign up for an account, a way to log in, and site-wide 
Login and Logout links. Other stuff to follow in this section is optional stylis- 
tic stuff. 

By default, Logged Out users see a Login link, and authenticated users see a 
Logout link. In Design view, the Loginstatus control has all the usual design 
accoutrements, including a Properties sheet and Common Tasks menu 
(Figure 7-12). You can change the text of either link using the LoginText and 
LogoutText properties. 

As an alternative to using text links, you can choose a pair of graphic images 
to show. One image to show to anonymous users, and another to show to 
authenticated users. When those pictures are placed in your site's folders, use 
the LoginimageURL property of the control to specify the picture to show to 
anonymous users. Set the LogoutimageUrl to the picture that authenticated 
users should see. 
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The Views menu on the Loginstatus control's Common Tasks menu lets you 
switch between what anonymous (Logged Out) users will see, and what 
authenticated (Logged In) users will see. You can change the text of either 
link just by editing the text. 

If you want something a little fancier than what the Loginstatus control has 
to offer, consider the LoginName and Loginview controls, discussed in the 
next two sections. 

The LoqinName control 

The LoginName control is about as easy to use as a control can be. It shows 
nothing to anonymous users. For authenticated users, the control displays 
the user's login name. Typically you use the LoginName control with the 
Loginview control. 



The LoqinVieu) control 

Like the Loginstatus control, the Loginview control can tell the difference 
between anonymous and authenticated users. But it's not limited to showing 
text or a picture. You can use it to show just about anything, even ASP.NET 
server controls. To use the control, just drag it to the Web page or Master 
Page. 
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After the control is placed on the page, the control is shaped as a box. The box 
has two different views, but you only see one view at a time. You can choose 

w you want to see (and design) by choosing one of the following from 
option on the Loginview control's Common Tasks menu: 



Anonymous Template: Content that anonymous users see. 
**" Loggedln Template: Content that only authenticated users see. 

What you put into either template is entirely up to you. It can be text, a table, 
a picture, an ASP.NET control, whatever. Think of the box as a mini-page that 
can contain anything that a big page can contain. 

During this stage of the site-building project, your best bet would be to create 
a simple Loginview control that shows a Login link to anonymous users. For 
authenticated users, the control shows the user's name and a Logout link. 
This comes in very handy when you're testing your site, because you can 
always see whether you're currently testing as an anonymous user or as an 
authenticated user. Putting the control on a Master Page is especially helpful 
because you'll be able to see it on every page that uses the Master. 

So, given that general advice, let's take a look at the steps required to make it 
happen: 

1. In Solution Explorer, double-click your Master Page to open it in 
Design view. 

In Chapter 4, 1 created a MasterPage .master file in a folder named 
Masters. So I'll use that one as a working example here. 

2. Drag a Loginview control from the Login category of the Toolbox to 
the top (or left) pane of the Master Page so that it will be visible on all 
pages that use the master. 

By default, the control will be named Loginviewl. 

3. From the control's Common Tasks menu, choose Anonymous 
Template. 

Whatever you add to the Loginview control now will be visible only to 
anonymous users. 

4. Drag a Loginstatus control from the Toolbox into the Loginviewl 
control. 

The Loginstatus control appears as a Login link, and its Common 
Tasks menu might open automatically. You don't need to change any- 
thing on the Loginstatus control, so just click the larger Loginviewl 
control to hide that Common Tasks menu. 
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So at this point, the Anonymous Template for the Loginview control 
contains a Login link. If you click the Common Tasks button for the 
,inview control, you should see AnonymousTemplate in the 
mon Tasks menu, and the Login link inside the LoginViewl control 
as shown in Figure 7-13. 
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5. To choose what authenticated users will see in the control, click the 
Common Tasks button for the LoginViewl control and choose 
LoggedlnTemplate. 

The Login link disappears because it's on the Anonymous Template, not 
the Loggedln Template. 

6. In the LoginViewl control, type the word Hello followed by a blank 
space. 

7. Drag a LoginName control from the Toolbox into the LoginViewl con- 
trol, just to the right of the word Hello. 

8. Drag a LoginStatus control from the Toolbox into the Logingviewl 
control. 

At this point, the LoggedlnTemplate should look like Figure 7-14. When 
you view the Common Tasks menu for the LoginViewl control, it should 
show LoggedlnTemplate, as shown in the figure. 

The LoginStatus control always shows the word Login in Design view. Don't 
worry about that. Later, when you actually use the page in a Web browser, it 
will show Logout to authenticated users. 

You can't open a Master Page on its own in a Web browser, so you can't 
choose View in Browser to test the page immediately. But that is not a prob- 
lem. You'll be able to put things to the test a little later in this chapter. For 
now, just close and save the Master Page. 
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sgmview "control isn't limited to show- 
ing two different views. If your site contains 
numerous roles, you can use the Edit Role 
Groups option on the Common Tasks menu to 
define multiple views for multiple roles. In the 
RoleGroup Collection Editor, use the Add button 
to add a RoleGroup placeholder to the left 
column. Then, to the right of the Roles column 
in the right column type a valid role name from 



your site, and then click OK. You can repeat the 
process to add multiple role groups. 

After you've created a RoleGroup, you can 
design what it shows to its members by clicking 
the Views option on the Common Tasks menu 
and choosing the new RoleGroup name. In 
other words, whatever you put in the Login 
view control at this point is visible only to 
people in the specified role. 
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Letting Users Manage Passwords 

People forget their passwords all the time. And the last thing you need is to 
be spending all your time reminding people of their forgotten passwords. So 
your site needs a means of allowing users to retrieve their own passwords. 
Likewise, users have to be able to change their own passwords, so your site 
will need that capability too. In the Login category of the Toolbox, the 
PasswordRecovery and ChangePassword controls are just the ticket. 



Usinq the PasswordRecovery control 

The PasswordRecovery control provides a way for a user to retrieve a for- 
gotten password. (Actually, with the default hashed encryption used in Visual 
Web Developer, it sends them a new password that they can use to log on). In 
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the browser, the control first asks the user to enter a user name and click 
Submit. If the user name exists in the database, the second page appears 

the user's secret question. When the user enters the correct answer 
is Submit, the control e-mails a password to the user's e-mail 
address, and provides a "Your password has been sent to you" confirmation 
message. 



To use the control, create a new page or open the page on which you want to 
place the control. For my example I created a new page named Recover 
Password . aspx that uses my Master Page. Just drag the control onto the 
page, like any other server control. You can choose a color scheme from the 
Auto Format option on the control's Common Tasks menu. I applied the 
Classic scheme to the PasswordRecovery control shown in Figure 7-15. 
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The PasswordRecovery tool is unique in that there are a couple of extra 
steps involved in getting it to work. Furthermore, the page has to be config- 
ured to work on the Web server, not your local PC, so you may need to just 
leave that page as-is, and then remember to finish it later after you've copied 
the site to a Web server. 

One thing you need to configure is the return e-mail address. This will likely 
be an e-mail address you create using your own domain name (after you have 
set up your own domain name). You enter that return mailing address into 
the Properties sheet by following these steps: 

1. With the page open and visible in Design view, click the 
PasswordRecovery control to select it. 

2. In the Properties sheet, expand the Behavior and MailDefinition 
categories. 
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3. Type your return e-mail address as the From property. 

Figure 7-16 shows an example where I've entered the hypothetical 

ess support@yourdomain . com. 



Figure 7-16: 
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4. Optionally, you can also fill in the Subject line for the message. 

In addition to defining a return address, your site must be configured to use 
the SMTP (Simple Mail Transfer Protocol) server provided by your hosting 
service. You won't know what that is until you've set up an account with a 
hosting provider, so don't knock yourself trying to get the PasswordRecovery 
control to work on your own PC. The PasswordRecovery control doesn't 
even need to work on your PC: It only has to work on the Web server. 

So the only smart thing to do is close and save the page that contains the 
PasswordRecovery control, and forget about it for now. If you try to test it in 
a Web browser, you'll just get an error message when it tries to e-mail the 
password. When you've chosen a hosting provider, they will tell you how to 
configure your site to use their SMTP mail server. It may be something as 
simple as adding the following lines to your web. conf ig file: 

<smtpMail 

serverName= " localhost " > 
</smtpMail> 
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' that it's absolutely impos- 
sible to test the RecoverPassword. aspx 
page on your local PC. The fact is, if you know 
how to configure IIS, understand virtual direc- 
tories, and have access to an e-mail server, you 
could get the control to work. However, doing 
so doesn't really solve anything because getting 



the control to work on your local PC is irrele- 
vant. The control only needs to work on the Web 
server. Even ifyou did get the control to work on 
your local PC, you'd probably still have to recon- 
figure on the Web serverto get it to work in your 
actual, live Web site. 



But keep in mind that I said it may be something as simple as that. Only your 
hosting provider can tell you specifically what's needed to get your Password 
Recovery control to work on their Web servers. Furthermore, and this is 
important enough to put in a warning: 




If you add the <smtpMail> tag shown above to the web . conf ig file on your 
local PC, you might create a situation where your site doesn't work at all. 
Wait until you've actually posted your site to a Web server to configure SMTP 
mail for your site. 



Even though you can't put the RecoverPassword. aspx page to the test yet, 
you still need to provide a link to the page so that once the page is published, 
people can get to the page. And ideal place for the link would be the Login . 
aspx page, where users will likely first discover they've forgotten their pass- 
word. Figure 7-17 shows an example where I've added a link to the Login, 
aspx page that asks if the user has forgotten his password. The target of that 
link is the RecoverPassword. aspx page. 
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The Change Password control 



e implies, the ChangePassword control lets a logged-in user change 
ord. Unlike other pages you've created in this chapter, a "Change 
Password" page applies only to logged-in users. An anonymous user can create 
an account and password, using the CreateAcct . aspx page described earlier. 
An anonymous user can also recover a lost password, assuming he or she has 
set up an account in the past and has simply forgotten their password. That 
user would access the Recover Password, aspx page to get their password. 
But again, you won't be able to really put Recover Password, aspx to the test 
until after the site is on a Web server. 



Because only logged-in users can change their password, you can put the 
page that allows password changes into the protected MemberPages folders. 
The other pages described in this chapter, CreateAcct . aspx, Login . aspx, 
and RecoverPassword. aspx, need to be in the root folder, or some other 
folder to which anonymous users have access. 

To put the ChangePassword. aspx page in the MemberPages folder, right- 
click that folder name in Solution Explorer and choose Add New Item as 
shown in Figure 7-18. In the Add New Item dialog box that opens, be sure to 
choose Web Form. I named my page ChangePassword. aspx, but you can 
name yours as you see fit. 
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As with any page, you can add text, tables, pictures, or whatever to make it 
look however you like. The only control you must add to the page is a 
ChangePassword control. Just drag that control name from the Login cate- 
gory of the Toolbox onto the page, as shown in Figure 7-19. 
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In the figure, I applied the Classic scheme to the ChangePassword control, 
just to give it some color. But even that step is optional. The control doesn't 
require any further configuration, so you can just close and save the page. 



Testing Membership 

At this point, you have built some more of your site's membership infrastruc- 
ture. When you test pages by viewing them in a Web browser, you will be 
experiencing the site exactly as strangers who are visiting the site will experi- 
ence it. That can be very confusing if you forget about the access rules you 
defined back when you were first configuring membership. 

For example, if you right-click the ChangePassword. aspx page and choose 
View in Browser, you might be shocked to discover that the 
ChangePassword . aspx page doesn't open. Instead, the Login . aspx page 
opens! Most confusing indeed! But it's not an error or a problem. It's the way 
things are supposed to work. Here's why. 

Any page that's stored in the MemberPages folder is off-limits to anonymous 
users (assuming you created an access rule to make it off-limits, as described in 
Chapter 3). When an anonymous user attempts to open a page in the Member 
Pages folder, she is automatically redirected to the Login . aspx page. If you're 
not signed into an account when you try to open ChangePassword . aspx, the 
same rule applies to you. Opening ChangePassword . aspx automatically redi- 
rects you to Login . aspx. 

If you sign into a user account on the Login . aspx page and click the Submit 
button, then you'll be taken to the ChangePassword. aspx page. It's impor- 
tant to understand how that works, otherwise you'll drive yourself absolutely 
batty trying to open members-only pages from the standpoint of an anony- 
mous user, because every page you try to open will take you to Login . aspx 
until you actually log into a user account. 
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The new Loginview control at the top of the Master Page is a big help in that 
regard. Because any time you open in a Web browser a page that uses that 
ou'll see your current status right away. If you're currently testing 
t as an anonymous user, you'll see a Login link in the Master, as 
shown at the top of Figure 7-20. When you're testing things out as a logged-in 
user, you'll see Hello, your current user name, and a Logout link, as shown at 
the bottom side of that same figure. 



Figure 7-20: 
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Keep in mind, too, that any user accounts that you create through the 
CreateUserwizard control are actual user accounts that will be stored in 
the database. You can view all current user accounts at any time via the Web 
Site Administration tool. Here's how: 

1. From Visual Web Developer's menu bar, choose Website O ASP.NET 
Configuration. 

2. In the Web Site Administration tool, click the Security tab. 

3. Click Manage Users. 

4. To see what role any user is in, click the Edit Roles link in that user's 
role. 

For example, in Figure 7-21 1 created a new user account for a hypothetical 
user named Testy Clicking the Edit Roles link for that user shows that the 
user has indeed been added to the SiteMembers role, as per the code added 
to the page to ensure that each new user is assigned to the SiteMembers role. 

Because there's no way to recover a forgotten password on your local PC, if 
you forget the password for any sample user account you create, your best bet 
would be to just delete the account by clicking the Delete User link next to the 
account name. Then you can re-create the account with a password you'll 
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remember. You can create the account using either the Web Site Administration 
Tool, or your CreateAcct . aspx page. It doesn't matter which you use because 
t will be the same: The user is added to the database. 
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Server Controls in Source Vieu) 

When you drag a server control from the Toolbox to the page, you add a pair 
of <asp : > . . . </asp : > tags that define that control to the Source of your 
page. You can see for yourself by clicking the Source button after adding a 
server control to a page. For example, the tags representing a Login control 



would look somethin 


g like this: 






<asp: Login ID="Loginl" runat=" server "> 
</asp : Login> 




Most of the server controls you create should follow the same general 
syntax, as summarized here: 



<asp : control Type ID=" yourName" runat= " server " > 



</asp : controlType> 
where 

i>* controlType is the type of control, and matches the name shown in the 
Toolbox. 

yourName is the name that uniquely identifies the control. VWD creates 
a default name, such as Loginl. You can replace the default name with a 
name of your own choosing. 

runat=" server" identifies the item as a server control, to be executed 
on the Web server rather than on the client computer. 
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The tags for a control really don't look like much, especially if you just keep 
the default settings for the control. In fact, from looking at the tags in Source 
d wonder how they accomplish anything at all — there's really not 
them. 




But, as is often the case, first appearances don't tell all. There are actually 
lots of attributes and settings hidden inside the <asp> . . . </asp> tags. These 
attributes are just intentionally hidden so as to avoid cluttering up the Source 
view of the page. 

If you switch back to the Design view, and use the control's Common Tasks 
menu to convert the control to a template, the <asp> . . . </asp> tags in Source 
view will change, often dramatically. Even if converting a control to a template 
has absolutely no visible effect on the control in Design view, chances are the 
switch has had a big effect on the content of the <asp> . . . </asp> tags. 

For example, when you convert a Login control to a template, and switch to 
Source view, the number of tags between the Login control's opening and 
closing asp tags increases — dramatically. In fact, I can't show all the tags 
here — they'd take several pages to display. 

Included in the expanded template view of the server control are the actual 
HTML tags used to render the control in the user's Web browser. You can edit 
any attribute in any tag you like (you can even design your controls that way). 

In Design view, choosing Reset from the Common Tasks menu collapses the 
control back to its smaller size in Source view. But remember, the Reset 
option also cancels out any customization you did while in the template view. 

I imagine most people would find it tedious to design things by tinkering with 
individual attributes in a templated server control. But then again, it all 
depends on your background and experience. There's no rule that says you 
must work in Source view. But you can if you want to — do what works. 



Relaxing Password Constraints 

By default, Visual Web Developer requires that passwords be at least seven 
characters long and contain at least one non-alphanumeric character. This 
provides for strong security — perhaps stronger than your site really needs. 
If you're not storing personal or financial information about users, you may 
want to relax the rules a little so users can make up passwords that are easier 
for them to remember. 
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To relax the password rules, you need to edit the web . conf ig file in your 
site's root folder. To edit the web. conf ig file, just double-click its name at 

the bottom of Solution Explorer. Initially the file contains some XML 
look something like this: 



<?xml version="l . 0 " encoding="utf-8"?> 

<conf iguration xmlns="http: / /schemas .microsoft . com/ .NetConf iguration/v2 . 0 "> 
<system.web> 

<roleManager enabled="true" /> 
authentication mode=" Forms" /> 
</system.web> 
< / configuration 



You need to add some new tags above the closing </ system. web> tag. You 
must type carefully because even the slightest mistake will prevent your site 
from working. (In fact, I'll post the exact text in the Chapter 7 section of my 
Web site at www. coolnerds . com/vwd so you can copy-and-paste rather than 
type). The exact lines to add above the </ system. web> tag are as follows: 

<membership> 
<providers> 

<remove name= " AspNetSqlMembershipProvider " /> 
<add name= "AspNetSqlMembershipProvider" 

type= " System . Web . Security . SqlMember shipProvider " 
connectionStringName= " LocalSqlServer " 
minRequiredPasswordLength= " 5 " 
minRequiredNonalphanumericCharacters= " 0 " 
passwordStrengthRegularExpression= " " 

/> 

</providers> 
< /member ship> 



The minRequredPasswordLength setting determines the minimum number 
of characters required for a password to be valid. I set that to five characters 
in the example. You can use a different minimum length if you prefer. 

The minRequiredNonalphanumericCharacters setting determines how 
many non-alphanumeric characters (punctuation marks) are required. I set 
that to zero so no punctuation marks are required. 

The passwordStrengthRegularExpression setting defines a regular 
expression that could require that the password contain (or not contain) 
certain characters. By setting that to nothing (""), as in the example, you 
allow "normal" passwords that can contain only text. 

Figure 7-22 shows how the web. conf ig file should look after adding the 
appropriate lines to the file. Notice how the new lines are all together within 

the <system.web> and </ system. web> tags. 
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Figure 7-22: 
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Cem. web> 

<role Manager enab led="true" /> 
Authentication mode="Forms" /> 



] <membership> 
] <providers> 

<remove name= "AspHetSql Member shipProvider"/> 
<add n a±[it = " As pMetSql Member ship Provider" 

type= "System. Web . Security . SqlHembershipProvider " 
connect ionStr ingNarne="LocalSqlServer " 
tninPequiredPasswordLength="5" 
miriRequiredNonalphanuiiiei:icCh,aracL£rs="0" 
pass wo rdStrengthRegular Express ion="" 

/> 

</ providers> 
</membership> 

</ system . web> 
- </conf iguration> 



Make sure you close and save the web . conf ig file after making any changes. 
To test the change, view the CreateAcct . aspx page (described earlier in 
this chapter) in a browser. (If you get an error message rather than the page, 
you typed something wrong in the web . conf ig file). You should be able to 
add a new test user account using a five-character (or more) password that 
contains no punctuation marks. 




152 Part II: Building Your Web Site 



DropBooks 




Chapter 8 



ion 



In This Chapter 

Getting organized, staying organized 
Creating custom site-navigation controls 
Using Menu, TreeView, and SiteMenuPath controls 
Make life easier with Web User Controls 



■ f your site is to be successful, it must be easy to navigate. If people can't 
M easily find and get to what they need, they might quickly lose interest and 
move on to another site. If yours is a large Web site, navigating between pages 
using nothing but hyperlinks can be tedious for the user. But for you, the 
developer, managing a large site with too many links can also be a nightmare. 

Visual Web Developer's Site Navigation controls provide a great way to pro- 
vide an easy, consistent navigational structure for your site. Furthermore, 
you can define all the links in one place. That way, when you add a new page 
to the site (or delete a page), you don't have to worry about going back to 
tweak the links in a bunch of different pages in your site — you just have to 
keep the links straight in one file. This chapter gives you the goods on how to 
manage your sites with Site Navigation controls. 



At some point, you have to think about how you're going to organize your 
Web site's content. Exactly how you do that depends on your content, the 
size of your site, and your definition of the word organized. But if you intend 
for your site to have major areas that people can navigate to, it would be 
good to create a file for each of those major areas. You can even put a blank 
. aspx page in each one as a placeholder to link to when you're developing 
your site navigation. 




Getting Organized 
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In Figure 8-1, for example, I've created some folders within my PublicPages 
folder. I've put a blank . aspx page in each folder. You don't have to include 
ite's folders in your navigation structure. In the interest of keeping 
pie to a reasonable size, I'll just focus on the AboutUs, Help, 
Products, and Services folders in my PublicPages folder. 



Figure 8-1: 

Some 
folders and 
pages in the 
PublicPages 
folder. 



Solution Explorer - C:\. , ,\MyVWDSite\ 

j | ll » 
J (: ...^MyVWDsile\] 

+ j App_Data 
+ _J Images 
+ □ Masters 
+ 'd MemberPages 

- / PublicPages 

E AboutUs 

li- ££] AboutUsHome.aspx 
; S Help 

lij in] HelpHome.aspx 
8 £S Products 

uV l^I] ProductsHome.aspx 
- ^ Services 

li- ^\ ServicesHome.aspx 
51 CJ SignUpPages 

jj web.config 
,_J Stylesheets 
"^1 Default. aspx 
cjj Login. aspx 
web.config 



~ 9 X 



J solution Explorer j Database Explorer 



Usinq Site-Natation Controls 



The two main VWD controls for site navigation are Menu and Treeview. The 
Menu control offers a simple drop-down menu of navigational links, as shown 
at the left of Figure 8-2. When the Menu control is first displayed on the page in 
a browser, only the Home link and arrow symbol are visible. The menu of links 
doesn't appear until the user clicks the arrow button. The Menu control is 
good for a small menu that you want to keep out of the way most of the time. 



Figure 8-2: 
Menu 

(left) and 
Treeview 
(right) 
examples. 
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The Treeview control shows the navigational structure in a collapsible tree, 
as in the example at right in Figure 8-2. The user can click + and - signs to 
vely) expand and collapse categories. I'm sure you've seen a gazil- 
ar collapsible trees; in VWD, both the Toolbox and Solution Explorer 
are collapsible trees. The Treeview control is best for handling larger naviga- 
tional tasks. 



Both the Menu and Treeview commands can be used with either static data 
or dynamic data. When using a control with static data, the navigational 
structure of the site is defined as part of the control. The method is easier in 
that you can define the whole menu structure just by filling in the blanks in 
dialog boxes. 

With dynamic data, you store data about the site's structure in a file, called a 
site map, that's external to the control. The advantage to this approach is 
that the site's navigational structure is stored in one place. So if you need to 
change the navigational structure of the site, you just have to change the 
external file, not every control on every page. 

In the sections that follow, I'll look at using both controls with static data and 
with dynamic, external data. 



Usinq the TreeVieuJ and Menu Controls 

The Treeview and Menu server controls are both in the Navigation category 
of the Toolbox. They're so similar that reading one set of instructions is suffi- 
cient for you to use either. In this section, I describe how to use the controls 
with static data (without a site map that's defined in an external file). This is 
the easiest way to create a map, especially if it's a small map that's not likely 
to change often. (That's especially true if, like a lot of us, you know nothing 
about XML and can't type worth beans.) 

The only real drawback to this method is that it's tedious. And if you put the 
control on a specific Web page, you'd have to re-create the control on (or 
copy and paste the control to) other pages. (Unless you put the control in a 
Master Page, in which case it will appear on all pages that use the Master 
Page — which may not be what you're looking for.) 




If you don't want to put the navigation control on a Master Page, you could 
put it in a Web User Control and use it as needed on pages throughout your 
site. I'll talk about Web User Controls later in this chapter. 

So the first step is to open the page on which you want to place the Menu or 
Treeview control. Make sure you're in Design view. Then follow these steps: 
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1. Drag either a Menu or TreeView control from the Toolbox onto the 
page as shown in Figure 8-3. 

he Common Tasks menu, click Edit Menu Items. 

The Menu Item Editor dialog box opens. 

3. Use the Menu Item Editor to define each menu item. 

More on this rather hefty step in a moment. 

4. Click OK. 



Figure 8-3: 

Menu 
control 
added to 
the page. 
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To use the Menu Item Editor, use toolbar buttons at the top of the Items list 
to insert options to appear on your menu. You'll need a root element first, so 
click the Add Root Item button in the toolbar to add a new root. At first, the 
item is just named New Item. 

Next you have to set the following properties in the Properties column of the 
dialog box: 

f NavigateUrlL: Click this property, and then click the Build button that 
appears. Use the Select URL dialog box that opens to navigate to the 
page that the link should open, and then click OK. 

V Text: Type the text of the menu item. 

ToolTip: Type the ToolTip text for the item. 

Figure 8-4 shows an example where I've added one root element. I've set its 
NavigateURL property to -/Default . aspx. The ~ character always refers to 
the root folder of the site (c : \ . . . \MyWDSite in Figure 8-1). So -/Default . 
aspx means "the default . aspx page in the site's root folder." I changed the 
Text property to Home (which also changed the text of the Value property). 
And I added a little ToolTip that reads Go to home page. 



Chapter 8: Easy Site Navigation 



Items: 

ipBooks 



Menu Item Editor 



"sal 



Figure 8-4: 

One item 
added to 
Menu Item 
Editor. 
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To add a child page item under the root item, click the Home item at the top 
of the left column, and then click the Add a Child Item button in the toolbar 
(second button from the left). Another New Item appears, indented under the 
first item. 

As before, you want to set the NavigateUrl property to the page the menu 
item opens, the Text to the item as you want it to appear in the menu, and 
optionally a ToolTip. Just keep repeating the process until you've defined all 
your items. 

Use other buttons in the toolbar to work with items you've already put in the 
menu. Click on the item you want to change, and then use the Delete (X), up, 
down, left, or right arrow buttons to reposition the item, if necessary. 

Figure 8-5 shows an example. I've just created the last child element, and 
changed its Text property to show "About us." You can't see the entire 
NavigateUrl. It's the path to the AboutUsHome . aspx page from the site's 
root folder, as given here: 

-/PublicPages/AboutUs/AboutUsHome . aspx 

You can see both Default . aspx and AboutUsHome . aspx in Figure 8-1. 

Remember, the same technique works whether you're creating a Menu control 
or Treeview control. If you ever need to change the control, just open the 
page on which you placed the control. From the control's Common Tasks 
menu, choose Edit Menultems again. In the dialog box, click the + sign next to 
the root item to expand the menu. 

Both the Menu and Treeview controls have an Auto Format option on their 
Common Tasks menu. Be sure to check out each one. 
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As mentioned, using static data with a Menu or Treeview control is just one way 
to create a site-navigation menu. The other is to store all the site-navigation 
info in site map file, and then bind the control to the site map. 



Creating a Site Map 

There are several ways to create site maps. The easiest is to just create a 
web. sitemap file in the root of your folder. Then edit the resulting XML file to 
define your site's navigation structure. Here are the steps to get started: 

1. Right-click your site name at the top of Solution Explorer and choose 
Add New Item. 

2. In the Add New Item dialog box, click Site Map. 

3. Click the Add button. 

In Solution Explorer, you see the Web. sitemap name at or near the bottom of 
the folder hierarchy. On the Design surface, you see an almost-empty site 
map file with some placeholders for typing text, like in Figure 8-6. (There is 
no Design view for the Web . sitemap file.) 

The trickiest thing about using the site map file is keeping track of parents 
and children. It's all done with nesting (indentations have nothing to do with 
it). Basically, any element that has child elements must enclose its child ele- 
ments in a pair of <siteMapNode> . . . </siteMapNode> tags. An element that 
has no children can be expressed in a single <siteMapNote /> tag (note the 
/> rather than just > at the end of the tag). 
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Figure 8-6: 

A new Web. 
sitemap file. 



Web.sitemap Start Page 



<?xinl version="1.0" encoding="utf-8" ?> 

< 3 i t e Map xm 1 ns= " http : / / gr-henias . in i c r □ s □ f t . corn/ AstiiNet/Site^ 1 



jteMapNode url="" title="" deseription™""> 

<siteMapNode ur 1""" tit le="" descr iption="" /> 
<siteMapNode url="" title="" description 3 "" /> 
siteHapNode> 
L</siteHap> 



The organization of the XML tags defines the organization of options dis- 
played in a Menu or TreeView control. In XML, it's all about nesting. Children 
of elements must be nested within their parent element. To illustrate, let's 
start with a simple example. 

At the top of Figure 8-7 you see a web. sitemap file. The outermost <site 
MapNode> . . . </siteMapNode> tags define the root element — that is, the 
item that appears above all others — of the menu. That root element is the 
parent to several child elements within the tags. Each of those represents a 
single link on a "submenu" below the parent. (I removed the url= and 
description elements that normally appear in the siteMapNode tags for 
clarity.) 

At the bottom of Figure 8-7 I show how that siteMap file looks in a Menu con- 
trol (left) and a TreeView control (right). In both cases, the Home link is the 
root element at the top of the heap. Each child element is an option "beneath" 
the root element (and to the right in the case of the Menu control). 

In real life, you couldn't just omit the url= attribute, as that's what binds the 
link to a page in your site. The description attribute just defines the 
ToolTip that appears when the user points to the menu item. Here's a sample 
web. sitemap with all the attributes in place: 

<sitemap. . . > 

<siteMapNode url="~/Default.aspx" title="Home" description "Go home"> 

<siteMapNode url="~/PublicPages/ Services /ServicesHome.aspx" 

titles "Products" description^' Product catalog" /> 

<siteMapNode url="~/PublicPages/ Products /ProductsHome.aspx" 

title=" Services" description^' Service options" /> 
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<siteMapNode url="~7PublicPages/Help/HelpHome.aspx" 

title="Help" description="Site help" /> 



i teMapNode url= " ~ / PublicPages / AboutUs / AboutUsHome . aspx" 
title="About Us" description^" Contact us" /> 



</siteMapNode> 
</siteMap> 



Figure 8-7: 

A Web. 
sitemap file 
(top) in 
Menu and 
TreeView 
controls. 



Web. sitemap file 
Parent 



<siteMap xmlns=. ... > 

<siteMapNode tit1e="Home"> 

<siteMapNode title="Products" /; 

<siteMapNode tit1e="services" /: 

<siteMapNode title="Help" /> 

<siteMapNode tit1e="About us" /; 

■ </siteMapNode> 

</siteMap> 



Home ► Products 
Services 
Help 
About Us 



- Home 

Products 
Services 
Help 
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Children 



Menu control 
Bound controls 



Tree view control 



As you might imagine, the more complicated the navigational structure of 
your site, the more complicated the web. sitemap file. For example, Figure 8-8 
shows the Web. sitemap file (again using only title= attributes for brevity) 
I used to make the TreeView control back in Figure 8-2. The braces won't be 
visible on your screen. I added those to highlight the nesting levels. 

The nesting levels in the web . sitemap file define the nesting levels (or show/ 
hide levels) in the Menu or TreeView control to which you bind the site map. 

Typing site maps isn't exactly fun. There's not much in the way of IntelliSense 
support or other user-friendly features. Writing a web. sitemap file probably 
involves as much copying and pasting as it does typing. 
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Figure 8-8: 
Web. site 
map file 
with three 
nesting 
levels. 



<?x«il version 1 
<siteHap> 



1.0" encoding="utf-8" 



7> 



eHapNode title="Living Things"> 

3 iteHapNode t it le= "Animals "> 

-<s iteHapNode t it le="Manmals"> 

OiteHapNode title="Cats" /> 
<s iteHapNode t it- le= "Dogs " /> 
■■- 3 it eHapWocle nr le= "Llamas " / > 

</siteHapNode> 



OiteHapNode title="Reptiles"> 

OiteHapNode t it le= "Turtles" /> 
<s iteHapNode t it le= "Lizards " /> 

</siteHapNode> 



{ 



s iteHapNode> 
--oiteHapNode tltle="Plants"> 



<s iteHapNode t it ie= "Fruits "> 

<s iteHapNode t it le= "Apples" /> 
<s iteHapNode t it le= "Bananas " /> 

</ siteHapNode> 

<s iteHapNode t it ie= "Vegetables'^ 
<s iteHapNode titie="Peas" /> 
<s iteHapNode t it ie= "Carrots" /> 
<s iteHapNode title="Corn" /> 

</siteHapNode> 



eHapNode> 
V </ s iteHapNode> 
</siceHap> 



The + and - signs at the left side of the editing window expand and collapse 
nodes within the site map. With a little practice, you can use those buttons to 
help make sure things are nested properly in your file. 

The upside to creating a web . sitemap file is that the site's navigation struc- 
ture is defined in one file. You don't have to worry about broken hyperlinks 
all over your site whenever you make a change. When you change your site, 
you need only change the navigation structure in the web . sitemap file to 
match the new structure. 



Customizing navigation for rotes 

If your site has members and roles, you may want different navigation maps 
for different types of users. For example, the navigation options for an anony- 
mous user might include links to public information only. The options on the 
navigation menu for an authenticated user, or user in a specific role, might 
include links to members-only content. 

Hiding navigational options from anonymous users is called security trimming, 
because you "trim things out" of a menu by making some options available 
only to people in specific roles. 
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Using security trimming in your site menus is a two-step process. First, you 
have to enable security trimming for your site as a whole. That involves 
lly defining web. sitemap as your site's default site map file, and 
ling security trimming on that file by manually editing your site's 
ig file. Here are the necessary steps: 



1. Open (double-click) the web.conf ig Hie in your site's root folder. 

Don't confuse Web.config with Web. sitemap. They're two separate files 
that play two separate roles. 

2. Scroll down to the bottom of the Web.config file, and get the cursor to 
a blank line just above the closing </ system. wet» tag. 

3. Type the following tags exactly as shown: 

<siteMap def aultProvider= "XmlSiteMapProvider " enabled= " true " > 
<providers> 

<add name= "XmlSiteMapProvider " 

description="Default SiteMap provider." 
type= " System . Web . XmlSiteMapProvider " 
siteMapFile="Web. sitemap" 
securityTrimmingEnabled= " true" /> 
</providers> 
</siteMap> 



Type carefully because typing something that's sorta like the above 
won't cut it. Use the IntelliSense menus as much as possible to minimize 
typos. 

4. Close and save the Web.config file. 

All you've done so far is change your site's overall configuration a bit to sup- 
port security trimming in the Web. sitemap file. To take advantage of that 
new feature, you have to specify who can see what in the web . sitemap file. 
You do so by adding the following attribute to any tag that's to be viewed by 
members of a specific role only: 



roles= " roleName" 



The roleName must be the name of a role you've previously defined for your 
site using the Web Site Administration Tool. For example, in Chapter 3, 1 cre- 
ated a role named siteMembers. So, in my Web. sitemap folder, I'd add 



roles= " SiteMembers " 



to the sitemapnode tag of any menu item that should be visible only to 
logged-in SiteMembers. The following is an example of a web. sitemap file, 
where three of the menu items are visible only to people in the SiteMembers 
role. I've boldfaced the title attributes and new roles=" SiteMembers" 
attributes for clarity: 
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<?xml version. . .> 
<siteMap xmlns. . .> 



pNode url=" -/Default. aspx" title="Home" description "Go home" > 

<siteMapNode url="~/PublicPages/Services/ServicesHome.aspx" 

title=" Products" description^' Product catalog" /> 

<siteMapNode url="~/PublicPages/Products/ProductsHome . aspx" 

title="Services" description^' Service options" /> 



<siteMapNode url= "~ /Member Pages /MemberServices/MemberServices .aspx" 

title="My Page" description^ "Member Services" 

roles= 11 SiteMembers " / > 
<siteMapNode url="~/MemberPages /Forums /ForumsHome. aspx" 

title= "Forums" description "Discussions" 

roles="SiteMembers" /> 
<siteMapNode url=" -/Member Pages /Downloads /DownloadsHome. aspx" 

title="Download" description=" Download stuff" 

roles=" SiteMembers" /> 



<siteMapNode url="~/PublicPages/Help/HelpHome.aspx" 

title="Help" description="Site help" /> 

<siteMapNode url="~/PublicPages/AboutUs/AboutUsHome.aspx" 
title="About Us" description=" Contact us" /> 

</siteMapNode> 
</siteMap> 



When that Web. sitemap file is bound to a navigation Menu control, anony- 
mous users see the drop-down menu at the left in Figure 8-9. Authenticated 
users in the SiteMembers role see the navigation menu shown at the right in 
that same figure. 



Figure 8-9: 

A security- 
trimmed 
navigation 
menu. 
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Binding a control to Websitemap 

After you've created a Web. sitemap file in your site's root folder, you can bind 
it to either a Menu or Treeview control. "Binding" just means that the control 
gets its information from the web . sitemap file rather than properties defined 
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within the control. First, in Design view, you open the Master Page (or . aspx 
page) on which you want to put the control. Then follow these steps: 



a Menu or Treeview control onto the page. 



2. From the Data Source drop-down list on the Common Tasks menu, 
choose <New Data Source... >. 

3. In the Data Source Configuration Wizard that opens, click Site Map. 

4. Click OK. 

That's it. To see the results, close and save the page. Then view the page in a 
Web browser. (Or, if you put the control on a Master Page, open any page that 
uses that master.) A Menu control initially shows only its root link. When you 
point to that item, the submenu items appear. To go to any page, click its link. 

If there's a problem with your Menu or Treeview control, the most likely cul- 
prit is the web. sitemap file: possibly something as minor as a missing quota- 
tion mark or improperly nested tags. If you enabled security trimming, the 
problem could be in the web . conf ig file. 



Adding an Eyebrou) Menu 

A breadcrumb or eyebrow menu is a short navigational path back to the home 
page, usually shown at the top of a page. You see examples of them at many 
large Web sites, including the Microsoft Developer Network Web site (www. 
msdn . com). Such a menu usually looks something like this: 

MSDN Home > ASP.NET Home > Get Visual Web Developer 

The path provides a quick view of where the user is in the navigational hier- 
archy, as well as quick links up the navigational hierarchy. 

If your site has a Web.sitemap file, you can easily add a breadcrumb menu to 
the top of any page in your site. Just drag a SiteMapPath tool from the 
Toolbox onto your page. It appears as a generic eyebrow menu in Design 
view as in the example shown in Figure 8-10. 

Like all server controls, SiteMapPath has a Common Tasks menu with an 
easy AutoFormat option. It also has an extensive Properties sheet where you 
can change things like font, color, and so forth. But you don't have to do any- 
thing to it if you don't want. Just close and save the page. 
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Creating Web User Controls 

Though not directly relevant to site navigation, I'd be remiss in my duties if I 
didn't make you aware of Web User Controls. Here's why: In any given Web 
site there's likely to be stuff you want to show on every page. That stuff you 
can put in a Master Page. On the other hand, there may also be stuff that you 
want to put on some, but not all, pages. An eyebrow menu would be a good 
example, because such a menu doesn't really make sense on pages that are at 
the top of a navigational hierarchy. 

If you drag-and-drop a control straight from the Toolbox onto a page, you 
create a whole new control. If you want consistency across your site, you'll 
have to style the control exactly the same on every page in your site. If you 
ever change your mind about that style, you'll have to make the change to 
every page that uses the control. Bummer. 

The simple solution to the problem is a Web User Control. Getting back to the 
eyebrow menu example, you could put the SiteMapPath control in a Web 
User Control, and design it as you see fit, and then close and save the Web 
User Control. 

Then, any time you want an eyebrow menu on the page you're editing, drag 
the Web User Control from Solution Explorer onto the page (which I named 
MyEyebrowMenu . ascx in Figure 8-1 1). Don't use the generic SiteMapPath 
control from the Toolbox anymore, as that one won't have the same style as 
the one in the Web User Control. 

When you drop the Web User Control onto your page, you won't have to design 
it because it's already been designed. And, if you ever decide to change the 
appearance of the control that's inside the Web User Control, no problem. Just 
open the Web User Control in Design view, make your changes, and close and 
save the page. The change is automatically reflected in every page on which 
you've placed the Web User Control. 
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Figure 8-11: 

Drag a Web 
User Control 
onto a page. 



PublicPages/A...boutUsToo.aspH Start Page 



T X Solution Explorer - C:\ t $ X 




j* !C:\...\MvVWDSrte\ i 

+ _j App_Data 
+ lJ Images 
+ Masters 
+ [J HemberPages 
+ _j PublicPages 

+ j Stylesheets 

- [_3 WebUserControls 

i+i §F] MyEyebrowMenu.ascx 
+ %'- NavMenu.ascx 
ffi [£j NavTree.ascx 
_j Default, aspx 

I Login. aspx 

m web.config 

Web. sitemap 



And remember, the eyebrow menu is just an example. Web User Controls are 
perfect for anything that you might want to show on some, but not all, pages 
throughout your site. 

A good starting point might be to create a folder for the controls. To do so, 
just right-click the site name at the top of Solution Explorer and choose Add 
FolderORegular Folder. Give the folder a name (I'll name mine 
WebUserControls) and press Enter. 



Creating a Web User Control 

Creating a Web User Control is almost identical to creating a regular Web 
Form page. Here are the steps: 

1. In Solution Explorer, right-click the folder in which you want to store 
the control and choose Add New Item. 

2. In the Add New Item dialog box, click Web User Control. 

3. Enter a filename of your choosing. 

I named mine MyEyebrowMenu . ascx in Figure 8-12. 

4. Choose language options to taste. 
I chose the usual in Figure 8-12. 

5. Click Add. 

The new control opens looking just like an empty Web page (in Design view). 
And basically, it is just an empty page in the sense that you can put whatever 
you want into it. In the eyebrow menu example, you'd drag a siteMapPath 
control from the Toolbox onto the page. But any server control from any 
Toolbox category would be fine as well. 
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Figure 8-12: 

Creating a 
Web User 
Control. 



Add New Ite m - C:\Documents and Setlings'Alan'imy documents\MyVWDSite\ 
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An A5P.NET server control created using the visual designer 



Name: 
Language; 



MyEyebrowMenu. ascx 
Visual C# 



1^1 Place code in separate tile 



Add 



You can style the item using its Common Tasks and Properties menus. Or you 
can leave it as-is. Then just close and save the page. Its filename extension, 
. ascx, identifies it as a Web User Control. 




Unlike a page, you can't view a Web User Control in a Web browser. You first 
have to put the Web User Control on a page, and then open that page in a 
Web browser. 



Usinq a Web User Control 

Any time you want to display a Web User Control on one of your pages, just 
drag its filename from Solution Explorer onto your page, as in the example 
shown back in Figure 8-11. Nothing else is required. To see the control, close 
and save the page on which you placed the control. Then view that page in a 
Web browser. 

Should you decide to change the style of the control that's inside the Web 
User Control, here's the drill: 

1. Open the Web User Control by double-clicking its name in Solution 
Explorer. 

2. Edit the control in Design view as you normally would. 




3. Close and save the control. 

All pages that use the Web User Control display the control with your 
current format settings. 
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liffe rent Web User Controls 
for different types of site visitors. For example, 
you could create a Web User Control named 
Anon . ascx (or whatever), and put whatever 
you want in that control. Create another Web 
User Control named Authenticated. ascx 
(or whatever), and put whatever you want in 
that one. Close and save both controls. 

Then, on any page where you wantto show one 
control or the other, first drag a Loginview 



control onto the page. Then drag Anon . ascx 
into the Anonymous Template of that control. 
Switch to the Logged In template, and drag 
the Authenticated . ascx file into that tem- 
plate on the Loginview control. Anonymous 
users will see only what's in Anon. ascx. 
Authenticated users will see only what's in 
Authenticated. ascx. 
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In this part . . . 

/f you want users to return to your site regularly, you 
have to give them a sense of belonging to a community. 
One way to accomplish that is to give them the option of 
personalizing their use of your site to their liking. In this 
part, you get a handle on using the Personalization and 
Themes features of VWD to give users what they want. 

If you plan to offer courses, products, or other things that 
users might purchase or sign up for, your site will need 
some custom database tables to store data about your 
offerings and record transactions. This part unravels the 
mysteries about how to create these features. 
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In This Chapter 

Creating user profiles 

Storing information about users as profile properties 
Retrieving, changing, and saving profile properties 
Using validation controls 
Using the Forms Designer 



■ M /hen you configure your Web site to support membership, VWD 
ww automatically creates database tables to store information about 
user accounts. However, it creates only the bare-minimum number of fields 
needed, such as User Name, E-mail Address, and Password. If you want to 
store more information than that about each user, such as name, address, 
and phone number, you must define profile properties. 

The basic idea in VWD is this: Every authenticated user has a profile that 
contains information about that user. In code, you can use the simple syntax 
Prof ile . propertyname to get, or store, information about each user. The 
keyword Profile (with an uppercase P) always means "whichever user hap- 
pens to be viewing this page." 

The first step is to decide what properties you want to store for each user — 
and then configure your site to support those profiles. 



Creating a User Profile 

A user profile consists of a set of property names, where each property name 
represents the unit of information you want to store. The names you give 
your properties are entirely up to you. Just keep the name short, no blank 
spaces, and make sure it starts with a letter (A-Z). Some common examples 
include names like FirstName, LastName, Address, City, State, and 
ziPCode. 
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rmayseeTTi tfiafprrone numbers and ZIP codes 
should be numbers ratherthan strings. After all, 
aren't (215) 555-1234 and 00123-1343 numbers? 
Actually, they're not numbers. At least, they're 
not scalar i/a/uesthat represent some quantity. 
With scalar values, you can do math (addition, 
subtraction, multiplication, and division) to 
come up with some new meaningful result. Try 
doing math with ZIP codes or phone numbers, 
and even if you can come up with some sort of 
result, that result has no real meaning. 



Also, numbers must start with a numeric digit 
(0-9) or a leading minus sign. A number cannot 
contain parentheses or embedded hyphens. 
Hence, you couldn't type a phone number like 
(215) 555-1234or a ZIP code like 00123-1343 into 
a numeric field even if you wanted to. You only 
want to use the Number data types for true 
scalar values such as 10, 98.6, -32, 9.99, and so 
forth. 



You can also choose a data type for each field — that is, a description of the 
type of information being stored, whether it's text (string), a number, a date, 
whatever. 

If you don't know a data type from a turtledove, suffice it to say that the 
string data type can store just about anything. So if in doubt, use the 
string data type. 

For the sake of example, in this chapter we create eight profile properties to 
store the following information about each person who creates an account on 
your Web site: 

i>* FirstName: This stores the person's first name (such as Joe or Mary), 
f* LastName: This stores the person's surname (such as Smith or Jones), 
f" Addressl: First line of street address. 

Address2: Optional second line of street address. 

City: Town or city in which the person lives. 

StateProvince: State or province in which the person lives. 
v* ZIPPostalCode: ZIP code or postal code in which the person lives. 

Country: Country where the person lives. 

You can assign default values to properties. For example, you can set the 
default value of the Country field to USA if you think most site members will 
be American. The default value is simply the value that's stored in the prop- 
erty unless the user specifies another. 
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Setting up user profiles 



user profiles, you need to manually edit the web . conf ig file in the 
bur Web site. Here's how: 

1. Open web . conf ig for editing by just double-clicking its icon. 

Typically you'll see that filename located near the bottom of Solution 
Explorer. 

2. Just above the closing </system. web> tag, type 

<prof ile> 

and press Enter. A closing </prof ile> tag is added automatically. So 
you end up with: 

<prof ile> 
</prof ile> 

3. With the cursor placed between the <prof ile> and </prof ile> tags, 
type: 

<properties> 

and press Enter. Once again, the closing </properties> tag is entered 
automatically. So you end up with 

<prof ile> 

<properties> 

</DroDerties> 
</prof ile> 

4. Between the <properties> and </properties> tags you need to type 
a tag for each property you want to define using the following syntax: 

<add propertyName /> 

where propertyName is the name of the profile property. 

If you're using the string data type, as all the sample fields described earlier 
were, then you don't need to specify a data type. So in this example all you'd 
really need in your web. conf ig file is the following: 



<prof ile> 






<properties> 






<add name= 


'FirstName " /> 




<add name= 


'LastName" /> 




<add name= 


' Address 1 " /> 




<add name= 


'Address2 " /> 




<add name= 


'City"/> 




<add name= 


' StateProvince 


/> 


<add name= 


'ZlPPostalCode 


/> 


<add name= 


'Country" /> 
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< /proper ties> 
prof ile> 




1're typing code, like here, there is no margin for error. You must 
type every character and blank space correctly or you'll get error messages 
when you try to view a Web page in your browser. 

If you want to put in a default value for a property, include a def aultvalue= 
" value" in the tag (where value is the text you want inserted into the prop- 
erty automatically). For example, to make USA the default value for the 
Country property, add defaultValue="USA" to the tag that defines the 
Country property, as shown below: 



<prof ile> 

<properties> 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
</properties> 

</prof ile> 



FirstName" /> 
LastName " /> 
Address 1 " /> 
Address 2 " /> 
City"/> 
StateProvince' 
ZlPPostalCode' 



/> 
/> 



Country" defaultValue="USA" /> 



I should mention that even though you can omit the data type when defining 
string value, that doesn't mean you must omit them. When you look at other 
examples of profile properties, you might see the string data type defined 
explicitly, like this: 



<prof ile> 

<properties> 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
<add name= 
type= 
< /proper ties> 
</prof ile> 



"FirstName" type= "System. String" /> 
"LastName" type= " System. String" /> 
"Addressl " type= " System. String" /> 
"Address2 " type= " System. String" /> 
"City" type= " System. String" /> 
"StateProvince" type= " System. String" /> 
"ZlPPostalCode" type= "System. String" /> 
"Country" def aultValue= "USA" 
" System. String" /> 



Try not to let this confuse you. Including the type=" System. String" 
attribute really has no effect — even if you omit the attribute, the data type 
will be System. String (called a string for short). 

So, just to make sure we're all on the same page here, let's recap. Assuming 
you added the same properties described in this chapter.your entire 
web. conf ig file should look something like the example in Figure 9-1. 
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Figure 9-1: 

Profile 
properties in 
a sample 

Web. 
conf ig 
file. 




eb.conf ig ▼ X 

<?XWl version =r, 1.0" encoding="utf-8"?> 
H <conf iguration xmlns=" http : //schemas .microsoft, corn/ . MetConf iqu 
^sterti. weti> 

<roleHanager enabled="true" /> 
^authentication roode = "Foritis" /> 

<prof i le> 

<properties> 

odd name="FirstName"/> 
<add name="LastName'7> 
<add nait\e= "Address 1 "/ > 
Odd naine="Address2"/> 
Odd name="City"/> 
Odd name="StatePrQvince"/> 
Odd naKie="ZIPPostalCode"/> 
Odd nartie" "Country" def aultValue="USA"/> 
</properties> 
</ prof ile> 

</system. web> 
</conf iguration> 



If you happened to add the tags for relaxing password rules as described in 
Chapter 7, your web . conf ig file might look more like the one in Figure 9-2. 

When you're sure you have it right, just close and save the web. conf ig file. 



Figure 9-2: 

Another 
sample 
Web. 
conf ig file 
with profile 
properties 
defined. 



web.config | 

<?xml version 11 " 1 . 0" encoding="utf-8"?> 
□ <conf iguration xifilns=" http : // scheiiias .mien: 



soft . i- Dili/ ■ "ij-.r -. Ljuration/yS . Q " 



Oystem. web> 

<roleHanager enabled="true" /> 
Outhentication mode = "Forms" /> 
<itiernbership> 
<providers> 

< remove nar[ie = "AspNetSqlMember3hipProvider "/ > 
Odd name="AspNetSqlHeiobershipProvider " 

type= "System. Web . Secur ity . SqlMembershipProvider " 
connect ionStr ingNanne = "Local5ql5erver" 
minRequiredPasswordLength="5" 
rtiinRequiredNonalphanuinecieCharaeter3="0" 
pass wordStrengthRegularExpr ess ion="" /> 
</ providers> 
-: / meiiJj e u s 1-j i p? 
<prof ile> 

<properties> 

Odd naitie="FirstNaine"/> 
<add naitie="LastNaitie"/> 
<add naitie="Addressl"/> 
<add naKie="Address2"/> 
odd name="City"/> 
odd name="StateProvince"/> 
Odd naitie="ZIPPostalCode"/> 
Odd nan\e= "Country" def aultValue="USA"/> 
</properties> 
</prof ile> 
</ system. ueb> 
L </ conf iguration> 
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Letting Users Enter Properties 

DBook© 

about use 



e purpose of creating profile properties is to store information 
about users (site members). You wouldn't want to type in all that information 
about each user yourself. Rather, you want each user to type in his or her 
own profile properties. To do so, you need to provide users with a fill-in-the- 
blanks form. 



A form is basically a Web page with controls for entering and editing data 
(information). To create a Web form for entering profile properties, just 
create a new, empty . aspx page. In the following steps, I create a page named 
CreateProf ile . aspx to let users enter profile information in their own 
accounts: 

1. In Solution Explorer, right-click the folder in which you want to store 
the new page and choose Add New Item. 

In my example, I right-clicked my MemberPages folder. 

2. In the Add New Item dialog box, click Web Form. 

3. Enter a filename for your page. 

I entered CreateProf ile . aspx for my page. 

4. Choose other options to taste. 

I chose the options shown in Figure 9-3. 



Add New Item - C: Documents .mil Settings YoniN.inieHere My Do.; time Fits MyVWDShe 



SB 



Figure 9-3: 

About to 
create a 
Web Form 
named 

Create 
Profile . 
aspx. 



templates: 

Visual Studio installed templates 

2J Web Form 
^ HTML Page 
A| Style Sheet 
^]XMFile 
, j SQL Database 

Site Map 
jjJScriptFile 
j^XSLTFile 

My Templates 

j Search Online Templates. . , 



3 Master Page 
5j) Web Service 
^ Global Application Class 

Text File 
H DataSet 
-ij* Mobile Web Form 
^Mobile Web User Control 
j-Skm Fte 



IfTj Web User Control 
^ Class 

^Web Configuration File 
_5 Resource File 
^ Generic Handler 

] VBScript Fi!-:- 
G£ Mobile Web Configuration File 
ij Browser File 



A Form for Web Application-; 
Lircjagc 



CreateProf ile, asp* 



v 0 Place code in separate file 
0 Select master page 



5. Click the Add button. 

6. If you opted to use a Master Page, choose your master, and then 
click OK. 
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A new, blank page (or content placeholder) opens ready for you to design 
your form. If it opens in Source view, click the Design button at the bottom of 
;n surface to switch to Design view. Then you can add text, pictures, 
controls to the page using all the standard methods described in 
earlier chapters. 



Here, some Textbox controls will allow users to enter profile information on 
this new page. Probably your best bet would be to add a table to the page first, 
to make it easy to organize the text boxes. The left column of the table would 
be used for plain-English descriptions of what you expect the user to type in 
the text boxes in the right column, as shown in the example in Figure 9-4. 



MemberPages/C...eProRle.aspK 



Figure 9-4: 

Table and 
some text 
added to a 
page. 



El 

Content - Contentl (Custom) 




Tell Us More About Yourself 






First Name 






Last Name 






Address 1 










Address 2 






City 






State / Province 




ZIP/Postal Code 










Country 



























To make the table act as a form, you'll need to add some Textbox controls so 
users can type in their own information. You'll also need to assign a program- 
matic name to each control, via the control's id property You'll use the pro- 
grammatic name to refer to the text box from code. The programmatic name 
can be just about anything you want, but must start with a letter and cannot 
contain spaces or punctuation marks. 

For example, in Figure 9-5 I dragged a Textbox control from the Standard 
tools (visible in the Toolbox at the left side of the figure) into a table cell. The 
text box is the white rectangle. That control is currently selected so you can 
see its Properties sheet. As you can see in the figure, I've named the text box 
txtFirstName by typing that name as the control's id property in its 
Properties sheet. 

You'll need to add (and name) a Textbox control for each profile property 
that you want users to see or edit. For my example, I created eight Textbox 
controls and named them as shown in Figure 9-6. Adding "txt" to the front of 
each name isn't a technical requirement. I just stuck that on there to remind 
myself later that the name refers to a Textbox control. 
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ButWrr^^ 




© LinkButton 




fal IrnageButton 




A HyperLink 




Tz DropDownList 




= C listBox 




0 CheckBox 




CheckBoxList 


Figure 9-5: 
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Image 

ImageMap 
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_2 Table 


txtFirst 
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HiddenReld 
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Calendar 
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MemberPages/C.„eProfile.aspn* 



EI 

Content - Contentl (Custom) 


Tell Us More About Yourself 


First Namef 






Last Name 1 


i 




□ 




t 


Properties 

tutFirstName System. Web, Ul.WebControls. 








sumo* i j 




State; 


(Expressions) 






Z 


(ID) txtFirstName 

AccessKey 

AutoCompleteType None 
AutoPostBack False 














BackColor 
BorderColor 

BorderStvIe NotSet 








v 






(ID) 

Programmatic name of the control. 





First Name 
Last Name ' 
Address 1 ' 
Address 2 s 
City E 

State/Province 5 
ZIP/Postal Code E 
Country ' 



txtFirstName 

txtLastName 

txtAddressI 

txtAddress2 

txtCity 

txtState Province 
txtZIPPostalCode 
txtCountry 



Adding a button 

In addition to having some blanks to fill in, users need a button to indicate 
when they're done typing and ready to submit their information. To add a 
button to the form, just drag a Button control from the Standard tools onto 
the form. VWD automatically names the button Buttonl. You can keep that 
name or change it by changing the button's id property. For my example, I'll 
keep the default name. 

To change the text that appears on the button, change the button's Text 
property. Figure 9-7 shows an example where I've added a button to my 
sample form, and set its Text property to Submit. So the button shows 
Submit as its label. (You could use OK or anything else you want for the 
button's Text property.) 
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So now you have a page that shows some empty text boxes, and a button that 
does nothing when you click it. But it has no connection whatsoever to pro- 
file properties. Before this page is of any real value, I need to come up with a 
way to copy whatever the user types into the Textbox controls into that 
user's profile properties. That requires some programming. And program- 
ming means writing code in the page's code-behind file. 



Writing some code 

Programming is all about writing code — which is slang for "computer 
instructions written in a programming language like C# or Visual Basic" (and 
not for "hieroglyphics," no matter what you've heard). Learning to write code 
fluently is an enormous undertaking and usually requires several months, if 
not years, of study and experience to master. I can't get into all of that here; 
there's simply not enough room in this book. But I can tell you exactly what's 
needed in terms of using profile properties. 

In code, if you want to refer to the contents of a Textbox, you use the syntax 

ctrlName . Text 

where ctrlName is the programmatic name (ID) of the control. For example, 
in code, txtFirstName . Text refers to the contents of the txtFirstName 
text box. 

To refer to a specific profile for the current user, the syntax is: 

Pro f i 1 e . proper tyName 
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where propertyName is one of the property names you created yourself. For 
example, Profile . FirstName refers to the first name of whatever user hap- 
e viewing the page at the moment. 



To copy the contents of a text box into a profile property, make the profile 
property "equal to" the Textbox control's contents. The C# syntax for that 
looks like this: 



Prof ile .propertyName = txtBoxID. Text ; 



Here propertyName is one of your profile property names and txtBoxID is 
the ID of its corresponding text box. The semicolon (, ) at the end of the line 
is a C# requirement. In Visual Basic, you just omit the semicolon. 




If you forget the semicolon, the C# Editor shows a little red squiggle where 
the semicolon should be. Type in the semicolon and your code should work 
properly. 



The following is a line of C# code that copies the contents of the 
txtFirstName control to the current user's Prof ile. FirstName property: 



Prof ile . FirstName = txtFirstName . Text ; 



To copy the contents of every text box to the user's Profile properties, you 
need several lines of code, like this: 



Prof ile . FirstName = txtFirstName . Text ; 
Prof ile. LastName = txtLastName . Text ; 
Prof ile .Addressl = txtAddressl .Text; 
Prof ile .Address2 = txtAddress2 . Text ; 
Profile. City = txtCity. Text ; 

Prof ile . StateProvince = txtStateProvince . Text ; 
Profile. ZlPPostalCode = txtZipPostalCode.Text; 
Prof ile . Country = txtCountry.Text; 



lyma code to an event 

To ensure that the code is executed only when the user clicks the Submit 
button, tie the code to the click event for Buttonl. The easy way to tie code 
to a button is to simply double-click the button in Design view. The code- 
behind page (where all code is kept) for the page opens, looking something 
like Figure 9-8. 

The code-behind page is the place where you put the logic of a page — the 
code that tells computers what to do, rather than stuff the user actually sees 
on the screen. After it's opened, the code-behind page appears in its own 
tabbed document window. You can switch back and forth between the . aspx 
page and the code-behind page by clicking their tabs. 
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MemberPages/C.rofile.aspx.cs MerriberPages/L...eProf ile. aspx* 
CreateProf ile 



^^^^ lfEjusing System; 

N I^N L^F f\ \jf f^ing System. Data; 

III I M llll f^-' ^u%ing System. Configuration; 

* -i^Bsing System. Collections; 

c using System. Web; 

using System. Web . Security; 
using System. Web . UI ; 
using System. Web . UI . Web Controls; 
using System. Web . UI . UebControls . WebParts; 
using System. Web . UI . HtmlControls; 



Figure 9-8: 

Code- 
behind page 
for my 

Create 
Profile 
example. 



v 'vButtonl_Click(object sender, EventArgs e) 



10 



IT ] public partial class Treat eProf ile : System. Web . UI . Page 
13j| < 

protected void Page_Load (object gender, EventArgs e) 

{ 



17| - 

leg 



> 

protected void Buttonl_Click (object sender, EventArgs e) 




When using C# as your programming language, the code-behind page has the 
same name as the . aspx page followed by a . cs extension. For example, the 
code-behind page for CreateProf ile . aspx is named 
CreateProf ile . aspx . cs. 

At the top of the code-behind page is a bunch of using directives followed by 
more C# code. Basically, you don't want to change or remove anything that's 
in the page unless you really know what you're doing. Just now, all you want 
to do is add some code to the Buttonl_ciick event handler — which 
appears near the bottom of the page and looks like this: 

protected void Buttonl_Click (object sender, EventArgs e) 
{ 

} 




Do not confuse the Buttonl_ciick procedure with the Page_Load proce- 
dure that precedes it. You'll use the Page_Load procedure later. Make sure 
you get the cursor between the correct procedure's opening and closing 
curly braces before you start typing. 

Type the properties code you created in the previous section here. When 
typing code, there is no margin for typographical errors. So you want to use 
IntelliSense as much as possible to minimize those errors. For example, when 
typing the first line, you can type Prof and then press Enter to choose Profile 
from the IntelliSense menu. 
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Next, type the dot (period), and the IntelliSense menu shows valid words/ 
names you can type there, as in Figure 9-9. Again, to get the word you want, 
ust keep typing, press Enter when the highlighter is on the word 
in the IntelliSense menu, or double-click the word you want in the 
IntelliSense menu. 




Yellow highlights near line numbers indicate lines that have been added or 
changed but not yet saved. 



Figure 9-9: 

Sample 
IntelliSense 
menu. 



□ public partial class "l Le : System. Web . UT . Fn: 

< 

protected void Page_Load (object sender, EventArgs e) 

< 



protected void Buttonl_Click (object sender, EventArgs e) 



Prof ile.f| 



J Addressl 
Address2 
^ City 
J" Context 
^5" Country 
t Equals 



% GetHashCode 

V GetProfile 

V GetProfileGroup v 




When typing C# code, remember to type a semicolon (;) at the end of each 
statement. If you forget the semicolon, the editor gives you a little red squig- 
gly line showing where to put it. 



When you've finished typing all the code, your code-behind page should look 
something like Figure 9-10. 



The wrong page opened! 



Normally you can view any page in your site by 
right-clicking its name in Solution Explorer and 
choosing View in Browser. However, when you 
start using privileged content in your site, it 
doesn't always work that way. By default, when 
an anonymous user attempts to access a page 
that requires authentication, they're automati- 
cally redirected to the login page. 



When you right-click a protected page in Solution 
Explorer and choose View in Browser, the same 
thing happens if you're not logged in — you're 
instantly redirected to your own login page, 
making it look as though the wrong page has 
opened! To get around this problem, you simply 
log in to a valid user account and then open the 
restricted page. 
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Figure 9-10: 

Here's the 

Buttonl_ 
Click 

event 
handler, 
ready to go. 



MemberPages/C.rofile.aspx.cs MemberPages/C . . . eProf ile . aspx Start: Page 



using System; 
u5*Lng System. Data; 
u^ng System. Configuration; 
rising System. Col lections; 
using System. Ueb; 
using System. Ueb .Security; 
using System. Ueb . UI; 
U3ing System: . Ueb . UI . Ueb Centre Is; 
using System. Ueb . UI . UebControls . UebParts; 
using System. Ueb . UI . HtinlControls; 

public partial class CreateProf 1 le : System. Ueb . UI . Page 

{ 

protected void Page_Load (object sender, EventArgs e) 

{ 



> 



Buttonl_Cl ick (object sender, EventArgs e) 



Prof ile. Firs tName 
Prof ile . LastName = 
Prof ile. Addressl = 
Prof ile. Address2 = 



; txtFirstName.Text; 
txtLastName.Text; 
txt Addressl .Text; 
txtAddress2 .Text; 



Profile. City = txtCity . Text; 

Prof ile. StateProvince = txtStateProvince . Text; 
Prof ile. ZIPPostalCode = txtZIPPostalCode . Text; 
Prof ile. Country = txtCountry . Text; 



When you're finished typing your code, just close and save the file as you 
would any other, by clicking the Close (X) button in its upper-right corner. 
The original . aspx page will still be open. The code you wrote doesn't affect 
its appearance or behavior in Design view The code won't actually do any- 
thing until you open the page in a browser. 



Determining Where to put 
the profile information 

The next thing to consider is when users enter profile information. Of course, 
you can provide a link to the page from any place you want (though a good 
time to grab users is right after they finish successfully creating their individ- 
ual user accounts). If you used a CreateUserWizard control to let users set 
up accounts, the job is easy. You just set the ContinueDestinationPageURL 
property of the CreateUserWizard control to the CreateProf ile . aspx 
page. 

For example, back in Chapter 7 I created a page in my sample site named 
CreateAcct . aspx. I would just open that page in Design view, click the control 
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to select it, and then scroll through the (lengthy) set of properties until I got 
to ContinueDestinationPageURL. There I'd click the property, click the 
Id b**tton, navigate to my CreateProf ile . aspx page, and click OK. The 
then shows the path to that page, as shown in Figure 9-1 1 . 



Figure 9-11: 

The 
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Destina 
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url prop- 
erty of a 
Create 
User 
Wizard 
control. 
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Close and save the CreateAcct . aspx page — and that takes care of allowing 
users to create accounts and enter profile information. 

Though I didn't specifically mention it, I was thinking about Web site security 
the whole way through the above scenario. I don't want anonymous users to 
have any access to profiles, so I put the CreateProf ile . aspx page in my 
MemberPages folder. That way an anonymous user can't get to that page. The 
only way to get to that page is by first successfully creating a valid user 
account. 

The word "successfully" is key there. I wouldn't want people to sneak around 
setting up accounts. But that's not going to happen; only users who success- 
fully create an account can reach the ContinueDestinationPageURL. That 
restriction is built right into the logic of the CreateUserWizard (so I don't 
have to worry about it). 

If you're going to allow users to enter profile information, you'll also have to 
let them change their own information. I haven't done anything about that 
yet. But I can do so pretty quickly. 



Letting users edit their profiles 

So far I've only created a form that can store information in a user's profile. 
We haven't come up with a means to retrieve a user's profile properties. If we 
want users to edit their own profiles, we need a page that can retrieve the 
profile information, show it on a form for the user to view (or edit), and if 
need be, send any changes back to the database. 
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Getting data from the profile to the text box is just the opposite of getting 
data from the text box to the profile. That is, rather than making the profile 
equal to the text box's text, you make the text box text equal to the 
operty. For example, to copy the user's FirstName profile property 
control named txtFirstName, the C# statement is: 



txtFirstName . Text = Prof ile . FirstName ; 

You could whip this profile-retrieval page together quickly just by making a 
copy of CreateProf ile . aspx and renaming it to EditProf ile . aspx. To do 
this, open the EditProf ile . aspx page, then double-click some empty space 
on the page background (or the content placeholder). Or you can just 
double-click EditProf ile . aspx . cs in Solution Explorer. Either way, the 
code-behind page opens. 

You want the profile properties to be loaded into the page as soon as the 
page opens so the user sees their information and can make changes. To exe- 
cute code as soon as a page opens, put that code in the page's Page_Load 
event handler. 




There's just one catch. With ASP.NET programming, every time a user does 
something on your page, a postback gets sent to the Web server. The post- 
back causes the Page_Load event handler to execute again — which is fine in 
some cases — sometimes (as in this situation) the Page_Load code should 
execute only when the user first opens the page — not every time they click a 
button on the page. 

To prevent code from being executed on postbacks, you can add some "If not 
postback, then . . ." C# logic to your Page_Load procedure, as follows: 



protected 
{ 

if (! 
{ 


void 


Page_Load( object sender, EventArgs e) 


: Page . 


isPostBack) 


} 

} 











In C#, an exclamation point (!) means not — so if ( ! Page . IsPostBack) { } 
is the C# way of saying, "If the page has already been loaded into the user's 
browser, don't execute the code in my curly braces." The code you add to 
copy profile properties to text boxes must go in the if ( ! Page . isPost 
Back) { } block's curly braces, as shown below: 



protected void Page_Load( object sender, EventArgs e) 
{ 

if (! Page . IsPostBack) 
{ 

txtFirstName . Text = Prof ile . FirstName ; 
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txtLastName . Text = Prof ile . LastName; 
txtAddressl . Text = Prof ile .Addressl ; 
txtAddress2 . Text = Prof ile .Address2 ; 
txtCity.Text = Prof ile . City; 

txtStateProvince . Text = Prof ile . StateProvince ; 
txtZlPPostalCode.Text = Prof ile. ZlPPostalCode; 
txtCountry . Text = Prof ile . Country ; 



} 

Figure 9-12 shows how the EditProf ile . aspx . cs page looks with all the 
right code in place. (Please note that I clicked the - sign next to the first 
using statement to collapse and hide it. But I did not delete anything up 
there.) 

Now the EditProf ile . aspx. cs page has two C# procedures, each of which 
plays a different role in the page: 



V Page_Load: Copies the contents of the user's profile from the Web 
server database to Textbox controls on the user's Web page. This hap- 
pens when the user first opens the page. 

V 0 Button l_Click: Copies the contents of the Textbox controls on the Web 
page to the user's profile on the database. This happens when the user 
clicks the Submit button. If the user never clicks the Submit button, 
nothing gets copied to the database. 



MemberPages/E..,file.aspx.cs* MemberPages/EditProf ile. aspx Start Page 



, OeateProfile 



Figure 9-12: 

The 

EditProf 
ile .aspx 
.cs page. 



1;B using |. . .| 
□ public partial class CreateProf ile 



| v| | j.vPage_Load(object sender, EventArgs e) 



3 3 
31 
3 5 



protected 



Page_Load (obje 



System. Web . UI . Page 
sender / Event Args e) 



if ( ! Page . IsPostBack) 

{ 

txtF irstName . Text 
txtLastName , Text = 
txt Addressl. Text = 
txtAddress2 . Text = 



: Prof ile. FirstName; 
Prof i le . LastName; 
Profile . Addressl; 
Fruiiie . Ac-dre.^:: ; 



txtCity.Text = Prof ile . City; 

txtStateProvince .Text = Profile . StateProvince; 
txtZlPPostalCode.Text = Prof ile . ZlPPostalCode; 
txtCountry . Text = Profile . Country; 



protected void Buttonl_Click(object sender, EventArgs e) 



Prof ile .FirstName 
Prof ile . LastName = 
Prof ile. Addressl = 
Profile . Adclres32 = 



; txtF irstName .Text; 
txtLastName . Text; 
txtAddressl. Text; 
txtAddress2 . Text; 



Profile. City = txtCity.Text; 

Profile . StateProvince ■ txtStateProvince . Text; 
Prof ile . ZlPPostalCode = txtZlPPostalCode.Text; 
Prof ile . Country = txtCountry. Text; 
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ieTTrotiTe"pTop~eTTfes are stored in the same 
database as the rest of the membership stuff — 
the database you see when you click the 
Database Explorer tab instead of Solution 
Explorer. Specifically, the profile properties are 



stored in the aspnet_Prof ile table. But the 
profiles aren't stored in a traditional manner, so 
you don't want to go rummaging around in that 
table unless you rea//y know what you're doing. 



That takes care of allowing users to view and edit their own profile informa- 
tion. To put it all to the test, you can start by opening (in a Web browser) the 
page for creating a user account. Then actually create a new account, click 
Continue, and you should then be able to add some profile properties to the 
new account via your CreateProf ile page. You should also be able to view 
and edit a user's profile using your Edit Prof ile page. 

If you put your CreateProf ile and EditProf ile pages in a protected 
folder, don't be surprised if your login page opens when you try to view 
either one in a Web browser. When you're in a Web browser, you're just 
another user. Like everyone else, you have to log in to a valid user account 
before you can access any page in your site's protected folder(s). 

Of course, if you made even the tiniest mistake when writing your code, or 
doing any other step in the overall process, you'll get error messages rather 
than working Web pages. In that case, you'll need to fix whatever is wrong 
before you can get the pages to work. 



Using prof He properties With Visual Basic 

I used C# as the language in the above example. But in Visual Basic, the tech- 
niques and code are basically the same: Double-click the page background to 
get to the Page_Load event for the page and double-click a button to get to 
its event handler. 

In Visual Basic, you'd use the if . . . End if block shown below in place 
of the C# if { } block. The rest of the lines are identical to the C# code, minus 
the semicolon at the end of each line (prompting some C programmers to 
refer to C# as "Visual Basic with semicolons"). 

Partial Class ProfileVB 

Inherits System. Web. UI . Page 

Protected Sub Page_Load ( ByVal sender As Object, _ 
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ByVal e As System. EventArgs) Handles Me. Load 
If Not Page.IsPostBack Then 

txtFirstName.Text = Profile.FirstName 
txtLastName.Text = Profile.LastName 
txtAddressl .Text = Prof ile . Addressl 
txtAddress2 .Text = Prof ile .Address2 
txtCity.Text = Profile. City 

txtStateProvince.Text = Profile. StateProvince 
txtZIPPostalCode.Text = Profile. ZIPPostalCode 
End If 
End Sub 



Protected Sub Buttonl_Click (ByVal sender As Object, _ 

ByVal e As System. EventArgs) Handles Buttonl. Click 
Profile.FirstName = txtFirstName.Text 
Profile.LastName = txtLastName.Text 
Profile. Addressl = txtAddressl. Text 
Prof ile. Address2 = txtAddress2 .Text 
Profile. City = txtCity.Text 

Profile. StateProvince = txtStateProvince.Text 
Profile. ZIPPostalCode = txtZIPPostalCode.Text 
Prof ile. Country = txtCountry.Text 
End Sub 



End Class 



Using Validation Controls 

The sample forms I presented earlier in this chapter have one weakness: 
They accept anything the user types into the boxes. In fact, they accept the 
form even if the user leaves every text box empty. That might be okay if you 
don't want to force users to enter personal information. But if getting profile 
data from users is important, you may have to reject empty fields or fields 
that contain meaningless data. 

The ASP.NET validation controls, available in the Validation section of the 
Toolbox, make it easy to verify form data (see Figure 9-13). To use a valida- 
tion control, you first need a place to put it on your form. You'll want to put it 
near the control you're validating, because the control will display an error 
message if the user's entry isn't valid. 

Most validation controls have certain properties that must be set in order for 
the validation to work. The main properties are these: 

v 0 ControlToValidate: Specify the name (ID) of the Textbox control that 
should be validated. 

V Display: Choose Dynamic so the error message takes up no space on the 
screen unless a user's entry fails the validity test. 
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Figure 9-13: 

Validation 
controls 
hanging 
around in 
the Toolbox. 
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ErrorMessage: Any text you type here is used in a validationSummary 
control (if any) on the current page. This is not the error message that 
appears near the control. 

f* Text: Whatever you type here appears next to the control, but only if a 
user's entry fails to pass validation. It can be a simple asterisk (*) or a 
more descriptive message such as Required Field! . 

The different kinds of validation controls available to you are described, one 
by one, in the following sections. 



RequiredFietdVatidator 

The most commonly used validation control is the 

RequiredFieldValidator, which prevents users from leaving a text box 
empty. It's super-easy to use: You just drag the control to your page, and then 
set its ControlToValidate property to the programmatic name (ID) of the 
control that you don't want left blank. Figure 9-14 shows an example; here's 
how I set it up: 

I added a third column to a table, and then dragged a RequiredField 
Validator control to the cell to the right of my txtFirstName Textbox 
control. 

I set the ControlToValidate property to txtFirstName to ensure that 
the text box would not be left blank. I set the Display property to 
Dynamic, and the ErrorMessage to First name required. 

V I set the Text property to an asterisk (*) — which reduced the size of 
the control to an asterisk. You can see the control selected, in the upper- 
right table cell, in Figure 9-14. 



Part III: Personalization and Databases 



DBooks 



Figure 9-14: 

Using a 
validation 
control to 
keep the 
First Name 
control from 
being left 
blank. 
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In a Web browser, those properties play out as follows: 

i>* When the page first opens, the validation control is there but invisible. 

If the user clicks the Submit button and the text box is empty, the valida- 
tion control shows its Text property (here it's a red asterisk). 

The ErrorText is displayed in a validationSummary control — provided 
you've added one to your page (as described later in this chapter in its 
own section, "ValidationSummary"). 




You can add as many validation controls to a page as you need to ensure 
quality data entry. 



RanqeValidatoY 

The Rangevalidator lets you check an entered value to verify that it falls 
within some range of acceptable values. It's the same idea as other controls 
in that you drag it to the page and set its ControlToValidate property to 
the name of the control you want validated. Then you set the Maximum 
value and Minimum value properties to define the range of acceptable 
values for the control. 



RequtarExpressionVatidator 

A regular expression is a symbolic way of defining complex validation criteria. 
You can do things like validate an entry against a pattern of characters, or 
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add complex "or" logic to a validation control. The language for creating regu- 
lar expressions is extensive and beyond the scope of this book. But there are 
dy-made ones that you can use without studying the whole language 
expressions. 




For an in-depth discussion of regular expressions, see http : / /msdn . 
microsoft . com/library/en-us/cpguide/html/cpconcomregular 
expressions . asp. 

To validate a control against a regular expression, first drag a Regular 
ExpressionValidator onto the form and set its ControlToValidate 
property to the name (ID) of the Textbox control you want to validate. Then 
click the validationExpression property, click the Build button, and you 
can scroll through a list of predefined standard expressions in the Regular 
Expression Editor (looking very regular in Figure 9-15). 



Figure 9-15: 

The Regular 
Expression 
Editor. 



Regular Expression Editor 



Standard expressions: 

P.R.C, phone number 
P.R.C. postal code 

P.R.C. Social Security number (ID number) 

U.S. phone number 

U.S. Social Security number 

U.S. ZIP code 



Validation expression; 



i 



http(s)?:«<[V<-]+U+[\w-]+«[\»v- ,/?%&.]*)? 



If you find a standard expression you can use, click it and then click OK. In 
the Properties sheet, the expression appears as a bunch of parentheses, 
backslashes, and other weird characters. But that's just what a regular 
expression looks like. It should work in your form anyway. 



Compare!} aiidator 

Use the CompareValidator to check a text box entry by comparing it to a 
known value or the contents of another control. The most common use of 
this is when having a user enter a new password twice. Use a Compare 
Validator to compare the contents of the two controls, and reject both 
entries if they don't match. Here's how to use one: 

1. Drag a CompareValidator control to your form and drop it there. 

2. Check the new control by setting its ControlToValidate property to 
the name of the control. 
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• To compare your control's contents to those of another control, 
set the ControlToCompare property to the name of the control to 
which you're comparing the current control. 

• To compare the entry to some other known value, set the 
ValueToCompare property of the control to the comparison value. 



CustomVatidator 

Use a CustomValidator if none of the other validation controls can do what 
you need done — and (oh yeah) you also happen to be a skilled programmer. 
If that's your thing, here are your steps: 

1. Drag a CustomValidator control to the page. 

2. Set the control's ControlToValidate property to the name of the con- 
trol you want to validate. 

3. Switch back to your form. 

4. Outside the Properties sheet, double-click the CustomValidator con- 
trol you dropped onto the page. 

The code-behind file for the page opens with a new CustomValidatorl_ 
ServerValidate procedure all ready and waiting for you to type in your 
code. 

5. Write your validation routine, close and save both files, then view the 
page in a Web browser to test it out. 



VatidathnSummary 

The validationSummary control displays a summary of all failed validations 
that occurred on the form. All you have to do is drop it on the form. You 
don't even need to change its properties. 

In Design view, the ValidationSummary is just a placeholder showing no 
useful information. In a Web browser, it initially is invisible. After the user 
clicks the Submit button, it lists the ErrorMessageText of each control that 
failed validation. It's simple to use, and handy for users. 
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ut wraps it up for profile properties. However, because I've touched 
on the topic of forms here, it might be worth taking a moment to mention 
that putting form controls in tables isn't the only way to go in VWD. If you're 
accustomed to working with forms-design programs or graphics programs, it 
may seem awkward to have to use tables to create forms. 

If you want to be able to stick controls anywhere on a page, you can: Use 
absolute positioning, the option that puts them where you say. You can use 
absolute positioning in any . aspx page, Master Page, Web User Control, or 
HTML page. The easiest way to do so is to start by creating or opening a 
page. Then, in Design view, follow these steps: 

1. Choose Layout O Position O AutoPosition Options from the menu bar. 

2. Make sure the first check box is selected. 

3. Set the drop-down list option to Absolutely Positioned. 

4. Optionally, enable snapping to pixels by choosing the second option, 
as shown in Figure 9-16. 

5. Click OK. 



Figure 9-16: 
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absolute 
positioning. 
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Choosing the option to snap to pixels is an easy way to line things up on the 
form. If you want total freedom in positioning things on the form (as you'd 
have in a graphics program), you can leave Snap to Pixels turned off. Feel free 
to try both settings to see how they differ and what works for you. 
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After you've enabled absolute positioning, any control you add to the page 
will initially jump to the upper-left corner of the page. But from there you can 
ywhere you like; it'll stay wherever you drop it. You can arrange 
trols however you see fit. 



For each text box you intend to put on your page, you'll probably want to 
also add a Label control to hold some text describing what goes into the text 
box. To type text into a Label control, you have to change the label's Text 
property in the Properties sheet. If you double-click the label, you wind up on 
the code-behind page. (If you do that by accident, just close the code-behind 
page and choose No when asked about saving your changes.) 

Figure 9-17 shows an example where I've absolutely positioned Label, 
Textbox, validation, and Button controls on a page to create a form simi- 
lar to CreateProf ile or EditProf ile. Because each item is absolutely posi- 
tioned on the page, there's no need to use a table to get things lined up. 



Figure 9-17: 

Four 
controls 
positioned 
absolutely 
on a page. 
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• Error message 1 . 

• Error message 2. 



Stacking absolutely-positioned objects 

If you combine absolute and relative positioning, free-floating objects can 
cover (or be covered by) body text. With absolute positioning, you can set an 
object's Z-Index to define where you want it to appear in a stack. An item with 
a Z-Index less than 0 is placed beneath text, like the box labeled Z = -1 in 
Figure 9-18. 

Items with Z-Indexes greater than zero are stacked above text. For example, 
in Figure 9-18, the box labeled z = l is one layer above the text, so it covers 
text beneath it. The box labeled z = 2 is at an even higher layer, so it par- 
tially covers the boxes and text beneath it. 

Setting the Z-Index of an absolutely-positioned item is pretty quick: 

1. Right-click the item and choose Style. 

Alternatively, you can click the item to select it, then click the Style 
property in the Properties sheet, and then click the Build button. Either 
way, the Style Builder opens. 
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2. In the Style Builder, click the Position category, use the Z-Index set- 
ting to set the item's Z value, and then click OK. 

The on-screen object now has your chosen Z-Index. 

To move an item quickly to the top or bottom of the stack without going 
through the Style Builder, click the item to select it. Then choose Format O 
Order O Send to Back (or Bring to Front, depending on where you want to 
put the item). 

In Source view, absolutely-positioned items sport the style attributes that 
define the item's place on the page, as in this example: 

style= "position: absolute; top:152px; left:56px; z-index:2" 

The top attribute defines the distance from the top of the page to the top of 
the control. The left attribute defines the distance from the left edge of the 
page to the left edge of the control. And of course z- index indicates the 
item's stacking position. 

•\,\V ^ If y° u §' ve an ' tem a Z-Index less than zero, then can't select it in Design view, 
switch to Source view and make its Z-Index a positive number. Go back to 
Design view and make your changes. Then you can set the Z-Index back to a 
negative number. 



Aliqninq absolutely-positioned objects 

Before you align controls, get at least one control into position so you can 
use it as the model to which other controls will align. From there, it's just a 
couple of easy steps: 
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1. Select all the controls you want to line up, saving the model control 
for last. 



DBocte 



s the sequence: Click the first item you want to align, hold down 
hift key while clicking others, and keep holding down the Shift key 
as you click the model. Be sure to select the model control last so it 
shows white sizing handles. 

2. Choose FormatO Align from the menu bar and line things up the way 
you want. 




For example, in the left side of Figure 9-19, 1 selected a bunch of Label con- 
trols, making zip/Postal Code the model. The right side of that same figure 
shows the result of choosing FormatOAlignORights to get the right edges of 
all selected controls to line up to the right edge of the zip/Postal Code 
control. 

It's easy to make mistakes while trying to get the hang of alignment options 
(trust me on this one). If you make a real mess of things, just press Ctrl+Z to 
undo the mess. 



Before aligning 



After aligning 



Figure 9-19: 

Selected 
items (left) 
and result of 
aligning 
(right). 
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r'trst Name 
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ZIP/Postal Code 
Country 



Sizing objects equally 

If you want to make multiple objects the same size, the quick way is to pick 
or make a control to use as a the model — and then follow these steps: 

1. Make a particular control the size and shape you want all the controls 
to be. 

2. Select all the controls that you want to size. 
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Make sure you select the model item last so it shows the white sizing 
handles. For example, in the left side of Figure 9-21,1 selected the control 
e top last, so it acts as the model. 



ose FormatOMake Same Size from the menu bar. 

4. Choose the uniform dimensions you want to apply to all controls. 

You can make them the same width, the same height, or the same width 
and height. In the right side of Figure 9-20, 1 first made the controls all 
the same size (both height and width). 



Figure 9-20: 

Selected 
items (left) 
and items 
made same 
size (right). 



Before sizing equally 



After sizing equally 



CP 



Spacing absoiuteiy-positioned objects 

If you want to equalize the spacing between multiple items in the page, first 
select all the items. No particular control plays the role of "model" here, so 
the order in which you selected the items isn't important. After selecting the 
items, choose FormatOHorizontal Spacing if you want to make the selected 
items equally spaced across the screen. Or choose FormatOVertical Spacing 
if you want to equally space the items down the screen. Note that you can 
also increase, decrease, or remove the spacing between items. 

As always, if you really make a mess of things when trying to space multiple 
items, press Ctrl+Z to undo the change. 



The left side of Figure 9-21 shows several Textbox controls selected. The 
right side shows those same selected controls after I chose FormatOVertical 
SpacingOMake Equal. 
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Before spacing equally After spacing equally 



Figure TF21: 

Selected 
items (left) 
and items 
made same 
size (right). 




There's no rule that says you must use absolute positioning and all the vari- 
ous options for aligning, sizing, and spacing controls. Using a table often gets 
you the same result with a lot less effort. 
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Using Themes 



In This Chapter 

Creating themes for your site 
Letting users choose their own themes 
Applying themes to pages 
Applying themes to Master Pages 



■ n Windows and some other programs, users can choose a theme. The 
«C theme defines the general look and feel of the content in terms of color 
scheme, font, the way buttons are represented, and so forth. 

If you're building a membership site where members are likely to spend a lot 
of time reading pages (for example, taking courses in an online school), then 
adding a similar theme capability to your Web site might be a good idea. 
Granted, it's a lot of work on your part. But it allows users to personalize the 
site content to their own needs and tastes, which, in turn, can make for a more 
pleasant experience at your site — and can encourage users to keep coming 
back for more — or even spread the word about your awesome site — instead 
of shopping elsewhere. 



The first step in adding themes to your site is to create an App_Themes older 
and a single Theme subfolder. You might want to start by creating a default 
theme that everyone first sees when they open the site. To create an 
App_Themes folder and a default Theme folder, follow these steps: 

1. Right-click the site name at the top of Solution Explorer and choose 
Add ASP.NET FolderOTheme. 

2. Type a name of your own choosing and press Enter. 

This is the name of your default Theme folder. I'll name my first sample 
theme Def aultTheme, but you can name yours anything you like. 




Creating Themes 
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In Solution Explorer, you now have a folder named App_Themes. It contains a 
subfolder with the name you entered in Step 2. The subfolder is empty; it's 
tainer in which you'll store the files that define the theme. 



Creating Theme Folders 

The whole idea behind themes is to offer the user several themes to choose 
from. Each theme you create will have its own subfolder within the 
App_Themes folder. So if you already have some ideas for themes you might 
create, you can create the Theme folders right now. To create a Theme folder, 
follow these steps: 

1. Right-click the App_Themes folder and choose Add ASP.NET FolderO 
Theme. 

2. Type a name for the new theme and press Enter. 

In Figure 10-1, I've added a few theme folders named Antique, ArtDeco, 
HeavyMetal, Nerdy NoSquint, and Pastels. 
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Figure 10-1: 

New App_ 
Themes 

folder and 
Theme 
folders. 
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J Stylesheets 
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Solution Explorer Database Explorer 



So now you have a bunch of empty theme folders, which, so far, have no 
effect whatsoever on the look and feel of the Web site. Each folder is just a 
container for things to come. 




You can rename and delete Theme folders like anything else. Just right-click 
and choose Rename or Delete. 
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What's in a Theme} 




j|qf\n^on your point of view. From a user's perspective, a theme is the 
"look and feel" of the pages in a site. For you, the Web developer, a theme is a 
folder that contains files. Those files, in turn, define the look and feel of pages 
in the site. There are three types of files you can put into a Theme folder: 

i>* Pictures: If a theme uses its own pictures for things like page back- 
grounds and icons, store those pictures in the Theme folder. 

v 0 Cascading Style Sheets: Use a standard Cascading Style Sheet to define 
things like font color, size, and other stylistic properties you define with 
the Style Builder. 

Skins: A skin defines the appearance of a type of control. For example, 
you can create a skin for all Textbox controls, another skin for all but- 
tons, and yet another for all TreeView controls. 

In a sense, themes are just a way of forcing you to get organized and stay 
organized. Because each theme has its own unique set of files, changing a 
theme is easy. You just open the theme folder and make your changes. 



With themes, you can use pictures to define things like the page background, 
the appearance of buttons and icons, and so forth. Any pictures that you 
intend to use as part of a theme need to be stored in the Theme folder. 
Assuming you already have the pictures, it's just a simple matter of dragging 
each picture's icon into the appropriate Theme folder in Solution Explorer. 

In Figure 10-2, 1 created some page-background images for my site's Antique, 
ArtDeco, HeavyMetal, Nerdy, and Pastels themes. DefaultTheme and 
NoSquint just use plain white backgrounds, so no pictures are necessary. I 
dragged each image into its appropriate folder. Though it's not entirely neces- 
sary to do so, I renamed each image PageBkg . gif . I renamed them so each 
filename defines the picture's role in the theme, rather than the picture's con- 
tent. But that's not something VWD requires you to do. You can name your 
own pictures however you like. 



Usinq 



Pictures in Themes 
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Figure 10-2: 

Some 
themes use 
a page- 
background 
image. 
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Creating a Theme Style Sheet 

To define the look and feel of pages in terms of font, text color, text size, back- 
ground colors, border colors, and so forth, create a theme style sheet. A 
theme style sheet is just a normal Cascading Style Sheet stored within the 
theme folder. If you already have a style sheet, you can just copy that one 
into a theme folder. Then edit the copy that's in the theme folder to define 
what's different in this particular theme. 

If you already have a Cascading Style Sheet that defines all the design ele- 
ments of your site, you can keep that sheet and continue to use it in all your 
pages. In theme style sheets, you can define only those elements that are dif- 
ferent from what the default style sheet specifies. That way you still have all 
your site-wide styles in one place, and themes define the styles of only those 
items that vary from the default style sheet. 

Because of the way theme folders are organized, it makes more sense to 
name files by their role within the theme than by their content. So you might 
want to start by copying your default style sheet to a theme folder. Rename 
the copy in the theme folder to stylesheet . ess. Then double-click that 
style sheet to open and use as your starting point for creating the theme style 
sheet. 

If you don't already have a style sheet for your site (or just prefer to start the 
theme style sheet from scratch), follow these steps: 

1. Right-click the Theme folder to which you want to add a style sheet, 
and choose Add New Item. 



2. In the Add New Item dialog box, click Style Sheet. 
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3. Click the Add button. 

VWD adds a page named stylesheet . ess to the theme folder, and 
s the page for editing. 




Technically, you don't have to name the theme style sheet stylesheet . ess. 
But again, given the way theme folders are organized, it seems to make more 
sense to name files by their role in the theme rather than the specific file 
content. 

Whether you create a style from scratch, or start with a copy of an existing 
sheet, you create and edit themes using the tools and techniques described 
in Chapter 6 to define your styles. To recap quickly: 



To create a new style, right-click some empty place in the style sheet, 
and choose Add Style Rule. 

To define a style using the Style Builder, right-click between the open- 
ing and closing curly braces of the style name, and choose Build Style. 



After you create a stylesheet . ess page for one theme, and close it, you can 
then copy it to all your other theme folders to use as the starting point in 
designing those other themes. 

The idea is to have a style sheet for each theme, as in the example shown in 
Figure 10-3. In that example, each stylesheet . ess page defines things like 
body text, font, and color; heading text font and colors; and so forth. 



Figure 10-3: 

Each theme 
folder has a 
StyleSheet. 
ess file 
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Excluding Def aultTheme and NoSquint, which don't use background pic- 
tures, each stylesheet . ess file defines a picture background. For example, 
rule for the body tag in the Antique theme's folder might look 
g like this: 



body 
{ 




font-family: 'Bookman Old Style' , Serif; 
font-size: medium; 
color: #8b4513; 

background- image: url (App_Themes/Antique/PageBkg.gif ) ; 



You don't have to type the style rule manually, of course. You can use the 
Style Builder to define everything in every style sheet. 

After you've defined pictures and style sheets for themes, you can take it a 
step further and define styles for ASP.NET controls within each theme. 
However, I don't refer to the styles for ASP.NET controls as style sheets — I 
call them skins. 



Creating Skins 

Exactly how far you want to take themes is up to you. You can design just 
about any page element using CSS styles and images. If you want to take it 
a step further and style ASP.NET controls likes text boxes, buttons, and 
Treeview controls, you can do that, too. You use skin files to design ASP.NET 
controls. 

A skin, like a style, is just the visual appearance of an item on a Web page. 
Most ASP.NET controls are skinnable, meaning you can define multiple styles 
for any given control. The way you define skins, though, is different from the 
way you define CSS styles. 



Creating a skin fite 

The easiest way to create a skin is to start with a new instance of the type of 
control you want to style: a text box, for example, or a button. Then style that 
control using its Properties sheet or the Style Builder (or both). Then copy 
the resulting <asp :...>... < /asp : > tags to a skin file, and remove any tag 
attributes that aren't stylistic and wouldn't be applied to all controls. For 
example, remove the id= attribute because that's unique to each control 
you create and not relevant to the control's visual appearance. 

Let's take it from the top and look at an example. First, create a Web Form 
page to use as an artist's canvas. Here's how. 
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1. Right-click the site name at the top of Solution Explorer and choose 
Add New Item. 



DropBooks 

3. Dest 



ose Web Form. 



3. Deselect the "Use master page" check box because you don't need one 
here. 

4. Name the page anything you like. 

I'll use Temp . aspx for my page. 

5. Click the Add button, and a new empty page opens up. 

If the page opens in Source view, click the Design button to switch to 
Design view. 

Next create an instance of the type of control you want to style. The following 
steps show you how: 



Figure 10-4: 

A Textbox 

control with 
styled 
Properties. 



1. In the interest of keeping it simple, drag a Textbox control from the 
Standard controls in the Toolbox onto the page. 

2. To style the control, right-click it and choose Style (or choose Options 
from the control's Properties sheet to define styles). 

Figure 10-4 shows an example where I've right-clicked a Textbox con- 
trol. You can also see the Properties sheet for the control. 

3. View the page in a Web browser to see how the control will really 
look in a page. Then close the browser. 
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4. When you're happy with the way the control looks, switch to Source 
view. 
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ct the entire control, including the opening and closing 
> . . . </asp: > tags, nothing more, nothing less, as shown in the 
example in Figure 10-5. 

6. Press Ctrl+C (or right-click and choose Copy) to copy the selected tag 
to the clipboard. 



Figure 10-5: 

A styled 
Textbox 

control's tag 
selected in 
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3 <body> 


10 


3 <form id="forml" runat;="server"> 


11 


3 <div> 


12 


3 <asp : TextBox ID="TextBoxl" cunat= "server " 


13 
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14 


ForeColor="SaddleBroun" 


15 


BorderColor="SaddleBrown w 


16 
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17 


Border¥idth= "2 px "> 


18 


- |l% </ asp : TexcBox>| 


19 


</div> 


20 


</form> 


21 


- </body> 




- </html> 



7. In Solution Explorer, right-click the theme file in which you want to 
create your skin file and choose Add New Item. 

8. In the Add New Item window, choose Skin File and type a filename for 
the file. 

I'd name the one I just created Textbox. skin. 

9. Click the Add button. 

10. Press Ctrl+V to paste the tags from the clipboard into the skin file. 

There may be some comments (green text) in the skin file already. That's 
just a large comment that you can delete. It serves no purpose other 
than to tell you about naming skins. 

11. Delete the id= . . . attribute and control name (TextBoxl in this 
example). 

If you're designing a control that has other non-stylistic attributes in its 
tag, those should be eliminated to. For example, when designing a 
generic Treeview control, you wouldn't want to define a specific Source 
attribute in the skin. The skin is only about visual attributes. 



Figure 10-6 shows how my Textbox. skin file looks after pasting in the tags, 
removing the green comment text, and removing the id= "Textboxl " 
attribute. As you can also see in the figure, this Textbox.skin file is in my 
DefaultSkin theme folder. 
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Figure 10-6: 

Sample 
Textbox.skin 
skin file. 
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Default (/s. named skins 

Any skin you create can be treated as either a default skin or a named skin. 
Here's the difference: 

Default skins: Apply automatically to all controls of the same type. For 
example, Textbox.skin would apply to all Textbox controls in all pages if 
treated as a default skin. 

f Named skins: Apply only to controls in pages that specifically identify 
the skin by skiniD in their Properties sheet. 

If you want to create a default skin, don't give the skin a SkiniD attribute. 
The skin is applied to all controls that use the theme, except controls that 
request a specific skin by name. Most likely you'll want to create one default 
skin that applies to all instances of the control you've styled. 

To define a specific skin that controls can use, give the skin a SkiniD 
attribute. For example, suppose you want to have two styles of buttons in 
your site, a regular button as shown at the top of Figure 10-7, and a bold 
button like the one at the bottom of that same figure. In that figure, the 
bottom button is selected, and you can see where I've set its Bold property 
to True. 



Figure 10-7: 

Two Button 
controls, 
one 
boldfaced. 
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Changing from Design view to Source view reveals the ASP tags for the two 
buttons, as shown in Figure 10-8. In the figure, I've already selected the tags 
o buttons, so I can copy them to a skin file. 



Figure 10-8: 

Tags for 
buttons 
selected. 



<hticl xn i n.^ = r ' ht t in : / / t.t t,j t,t . t,t;; . qici/ 1999 / xhtml " > 

<head runat" "server "> 

<title>Untit:led Page</title> 
</head> 

<body> 

<forrti id="f oritil" cunat = "server"> 
<div> 

<asp:Button ID="Buttonl" runat="server" Text="Button" /> 

<asp:Button ID="Button2" runac="server" Font-Bold="True" Text="Button" 

</div> 

</f ora> 
</lji:idy> 
</hcml> 



Next, just copy both tags to a new skin file. Because these are for ASP Button 
controls, you'd right-click a theme folder and choose Add New Item. Choose 
Skin File in the Add New Item dialog box, name the file Button. skin and click 
Add. Then paste the tags into the skin file. 

Recall that you always need to remove from the skin file any attribute that 
will vary from one control to the next. That means you always have to take 
out the id= attribute. In the case of a Button control, you also want to 
remove the Text= attribute because that defines the text that appears on the 
button. That will vary from one button to the next. (OK buttons, Cancel but- 
tons, Submit buttons, and so forth, all have unique text.) 

Finally, add a skiniD= " yourName" attribute to all but the default skin. The 
yourName part can be anything you like. In the case of my bold button, I'd 
probably use something like skiniD="Bold". 

In my own Button. skin file I replaced the comment text with the 
<asp:Button> tags. I removed the iu=" name" and Text="Button" attrib- 
utes from both tags. Then I added a skiniD="Bold" to the second button 
style to differentiate it from the default button style, just above in the same 
skin file. The result is shown in Figure 10-9 where the Button . skin file in 
DefaultTheme contains a default skin for buttons, and a Bold skin for buttons. 



Figure 10-9: 

New 
Button. skin 
file in 
Default- 
Theme 
theme. 
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I've intentionally kept these skin examples small and simple, so as not to 
obscure the basic facts with lots of details. But you can style your controls 
you see fit. 



As with background pictures and style sheets, you'll need to create skin files 
for all your themes. (As you can imagine, one could end up putting a lot of 
time into this sort of thing.) The result would be as in Figure 10-10, which 
shows some of my sample theme folders. Though you can't tell from looking 
at the figure, the Stylesheet . ess, Textbox. skin, and Button, skin files in 
each folder provide a style that's unique to that theme. 



Figure 10-10: 

Each theme 
can contain 
its own skin 
files. 
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Using Themes in Pages 

To take advantage of themes while creating and editing pages, you really 
don't have to do anything special; as always, style-sheet themes are applied 
automatically. Default skins are also applied automatically to ASP controls. 
For example, every Textbox control automatically takes on the appearance 
of the currently selected theme's Textbox. skin file. 

If you want a control on a page to use a non-default skin file, just set the con- 
trol's skiniD property to the name of the skin you want to use. For example, 
suppose you're creating a new page and you want to add some buttons to it. 
One of the buttons should use the Bold skin. After you add the button to your 
page, set its SkiniD property to Bold (as in Figure 10-11). 
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The control to which you apply a skin won't actually take on the skin's 
appearance immediately. (That's why the Submit button doesn't look any dif- 
ferent from the Reset button in Figure 10-11.) Keep in mind that so far we've 
only taken the first step to adding themes to the site. There's still plenty 
more to do here. 

There are many ways to implement themes. But it seems to me the most 
likely scenario would be that you want each member to be able to choose 
their own theme, which means to be able to store each user's theme prefer- 
ence as a profile property. So let's start with that. 

Letting Members Choose a Theme 

If the goal is to allow members to choose a theme, the first thing you'll want 
to do is create a profile property — say, named Pref erredTheme — in which 
you store each user's preferred theme. To ensure that each new user has 
some theme selected, you can give the profile property the name of your 
default theme. 

You can add the profile property to the web . conf ig file as described in Chap- 
ter 9. In my example where I already created profile properties, I would just 
add a new property named Pref erredTheme, give it a default value of 
Def aultTheme, and a data type of System. String as shown in the follow- 
ing code: 
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r-N i—\ i <pi 

DropBooR; 



<prof ile> 
<properties> 

name="FirstName" /> 
name="LastName" /> 
odd name="Addressl" /> 
odd name="Address2" /> 
odd name="City" /> 
odd name="StateProvince" /> 
odd name="ZIPPostalCode" /> 
odd name="Country" defaultValue="USA" /> 
odd name="PreferredTheme" defaultValue="DefaultTheme"/> 
</properties> 
</prof ile> 



That takes care of having a place to store each user's preferred theme. In 
code, you can use Profile . Pref erredTheme whenever you want to get, or 
set, the current user's preferred theme. 

Next, you need some means of allowing users to explore themes and choose 
one, which means some sort of interactive form. 



Creating a paqe for (/ieuriny themes 

Next, you'd need a page where a user can go and take a look at various 
themes, and then choose a preferred theme. On my site, this page would go 
in my MemberPages folder because I'd only allow authenticated users to 
choose themes. So it's just a matter of right-clicking the MemberPages folder 
and choosing Add New Item. I'd choose Web Form as the template, enter 
ChooseTheme . aspx as my page, choose Visual C# as the language, and check 
both the check boxes for choosing a Master Page and using a code-behind 
page. Nothing new or different there. 

To allow users to choose a theme, you'll need a control that allows users to 
choose any one of several mutually exclusive options — such as a drop-down 
list, a list box, or perhaps a set of option buttons (although you could just as 
easily use buttons or links). 

The page also needs some content that uses styles defined in the themes. That 
way, when the user chooses a theme, you can simply apply the theme to show 
the user how the theme looks. How you design the page is entirely up to you, of 
course. As an example, I started off with the page shown in Figure 10-12. 
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Okay, at this point there's nothing special about the page. It's just a table with 
some text, a Textbox control, and a couple of buttons that do nothing. (The 
Sample2 button has its skiniD property set to Bold to test the Bold skin in 
my Button, skin themes.) The two top table cells have their class proper- 
ties set to ColHead to test the td . ColHead style in my themes. 



Creating a control for choosing a theme 

Next comes the tricky part where I need a control that allows users to choose 
a theme. The trickiness comes from the fact that as soon as the user chooses 
a theme, we need to do a postback to the server to update the user's profile 
and also to apply the theme to the page. But let's start with the control itself. 

I'll use a ListBox control for this example. Drag a ListBox control from the 
Standard controls in the Toolbox onto the page. Then choose Enable 
AutoPostBack from its common tasks menu (as in Figure 10-13), so a post- 
back occurs as soon as the user chooses a theme. 



Figure 10-13: 
A ListBox 

control 
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the page. 
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Next you populate the ListBox with some options. Click Edit Items and use 
the Listltem Collection Editor (Figure 10-14) to list options to appear in the 
or each option, enter two things: 



: The text that appears in the box. This can be any text you want. 

I *<" Value: The value that the selection returns. This must exactly match the 
name of a Theme folder in the App_Themes folder. 



Figure 10-14: 

The Listltem 
Collection 
Editor. 
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Each time you click the Add button, you're prompted to enter another item. 
In Figure 10-14, I've added an option for each theme. I left the highlighter on 
the No Squint option to illustrate that it's okay to show "No Squint" as two 
words in the list. However, the value of that option must be NoSguint to 
match the name of the Theme folder. 

When you click OK in the Listltem Collection Editor, you'll be returned to the 
page and the options are visible. You can then set the height of the control by 
dragging its bottom edge (or by setting the Height property in the control's 
Properties dialog box). 



Storing the preferred theme 

When the user makes a selection from the ListBox, that control's 
SelectedValue property will equal the Value of the selected item. For starters, 
we need some code to copy the value to the user's Pref erredTheme property. 
To get to the code-behind file, first double-click the ListBox control. The event 
handler for the ListBox is named ListBoxl_SelectedindexChanged. 



Part III: Personalization and Databases 



The C# code needed to copy the selected value to the user's profile is simply 
this: 



DBook& 



Pref erredTheme = ListBoxl . SelectedValue; 



Another detail to think about here is the fact that when the user first opens 
the page, she will already have a theme name selected in her profile. Then 
the ChooseTheme page first opens; the ListBox control should show that 
current theme as the selected theme. So in the Page_Load event, you need 
some code to set the SelectedValue of the ListBox control to whatever is 
currently in the user's Pref erredTheme property. Hence, the Page_Load 
event needs this statement: 



ListBoxl . SelectedValue = Prof ile . Pref erredTheme; 



But, as is often the case with page loads, we have to take postbacks into con- 
sideration. Every time the user clicks the ListBox control, that's going to 
cause a postback, as we really only want to load the preferred theme when 
the user first opens the page. So once again, we need some "if not postback" 
logic in the Page_Load event handler, as shown here (in C#): 

if ( ! Page . isPostBack) 
{ 

ListBoxl . SelectedValue = Prof ile . Pref erredTheme; 
} 

Appiyinq a theme 

Given our whole approach to themes in this chapter, it stands to reason that 
whenever a page loads, its theme must be set to the user's preferred theme. 
To get that done in your code, simply set Page . Theme to the user's preferred 
theme. In C#, the code looks like this: 



Page. Theme = Prof ile . Pref erredTheme; 



But, you can't set a theme in the Page_Load event because the theme has to 
be applied before content and controls are rendered on the page. The 
Page_Load event fires after all that stuff is done, which is too late to apply a 
theme. So use the Page_Preiniti ( ) event handler instead. 



You won't necessarily find a predefined pre-init handler in the page. But you 
can just copy and paste one of the existing handlers into the code and 
change its name to Page_Preinit. Then type in the code to apply the pre- 
ferred theme, as given here: 

protected void Page_Prelnit (object sender, EventArgs e) 
{ 

Page. Theme = Profile. Pref erredTheme; 

} 
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In the above code, I'm assuming that every user will have something in their 
Pref erredTheme profile, mainly because I gave that property a default value 
,onf ig. Just to play it safe, you could build a little logic into the code 
ref erredTheme is "nothing," then Def aultTheme is used as the 
preferred theme, as given here (again in C#): 



protected void Page_Prelnit (object sender, EventArgs e) 
{ 

if (Prof ile . Pref erredTheme == null) 
{ 

Page. Theme = " Def aultTheme " ; 

} 

else 
{ 

Page. Theme = Profile. PreferredTheme; 

} 



The final C# code for the chooseTheme . aspx page looks like Figure 10-15. 



MemberPages/... Theme.aspH.es Start Page 



Figure 10-15: 
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m| |f+Page_PreInit( object sender, EventArgs e) 



0 using [7. .] 

i public partial class ChooseTheme : System. Web . UI . Page 



// On pre-init ial i zat ion apply user's preferred theme, 
protected void Page_PreInit (object sender, EventArgs e) 
< 

if (Prof ile . Pref erredTheme == null) 

(Page. Theme = "Def aultTheme"; } 
else 

{Page. Theme = Prof ile . PreferredTheme; } 



// On first load, set Li3tBox value to PreferredTheme value. 

protected void Page_Load (object sender, EventArgs e) 

< 

if ( ! Page . IsPostBack) 
( 

ListBoxl . SelectedValue = Prof ile . Pref erredTheme; 

) 



> 



//Uhen user selects theme, copy to their PreferredTheme. 
protected void ListBoxl_SelectedIndexChanged (object sender, 

EventArgs e) 

{ 

Prof ile . Pref erredTheme = ListBoxl . SelectedValue; 

) 



All well and good — save for one little problem unique to this page: The 
Preinit event fires before the postback — which doesn't allow for the theme 
to be applied to the current page the first time you choose an option from the 
list box. To get around that, you can add a Preview button to the page beneath 
the ListBox, and provide some sort of instruction telling the user to click a 
theme name, then click Preview. 
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You don't have to program the button to do anything, because if you just drag a 
button from the Standard tools into the page, it will automatically do a postback 
ked later, in the browser. So basically you'd end up with something like 
16. The only control on that page that has an event handler is the 
ListBox control, which is handled by the ListBoxl_SelectedindexChanged 
shown in Figure 10-15. 
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A theme tester page 

The chooseTheme page simply allows a user to choose a theme. The theme 
won't actually be applied to any pages unless you specifically apply it. Then 
the theme of choice is the current user's preferred theme. So you need a 
Preinit handler on every page that will apply the theme. 

To test it out, create a page named ThemeTester . aspx, and provide a link to 
it from the ChooseTheme . aspx page, as I did in Figure 10-16. In ThemeTester 
you can put any text or controls you want. But — most importantly — your 
code must apply the theme, like this: 

protected void Page_Prelnit (object sender, EventArgs e) 
{ 

if (Prof ile . Pref erredTheme == null) 
{ Page. Theme = "DefaultTheme" ; } 
else 

{ Page. Theme = Prof ile . Pref erredTheme; } 

} 

That should be all that's required in the code-behind page of any page to 
which you want to apply user's preferred themes. After you get things work- 
ing in ChooseTheme . aspx and ThemeTester . aspx, then it's just a matter of 
copying that same Page_Preinit handler to any page that needs to apply a 
user-selected theme. 
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pply themes to Master Pages in same way you apply themes to an 
. aspx page. For example, you could allow users to choose background colors 
for the various table cells that make up a Master Page layout. Step 1 would be 
to open the Master Page and set the style property of each table cell to a 
class name. Remove any explicitly-set style properties that would conflict 
with the theme. 

In Figure 10-17, for example, I removed the style properties for the top table 
cell, and changed the Class property to a MasterTop. And though they're 
not visible in the figure, I removed the style properties from the left column 
as well, and set its Class property to MasterLef t. 



Figure 10-17: 
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Close and save the Master Page. Then in your main style sheet (if you have 
one), set a default style for both elements as in the examples given here: 

TD. MasterTop 
{ 

background-color: eOffff; 
border-bottom: #483d8b thin solid; 

} 

TD.MasterLeft 
{ 

background-color: #fffff0; 
border-right: #483d8b thin solid; 

} 
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You'll need the similar style rules in each theme folder's stylesheet . ess 
page, though the colors and other stylistic options you choose would vary 
theme folder to the next. 



code-behind file for the Master Page (MasterPage .master . cs in my 
example), add Page_Preinit code to apply the user's preferred theme. The 
code is no different from the code you'd use in an . aspx page. So, in my 
example, it would look like this: 

public partial class MasterPage : System. Web. UI .MasterPage 
{ 

// On pre-initialization apply user's preferred theme, 
protected void Page_Prelnit (object sender, EventArgs e) 
{ 

if (Prof ile . Pref erredTheme == null) 
{ Page. Theme = "DefaultTheme" ; } 
else 

{ Page. Theme = Prof ile . Pref erredTheme; } 

} 



} 



Whether to allow users to customize Master Pages is really something you 
have to decide for yourself. 




There's no rule that says a site can only have one Master Page. The fact is, a 
site can have as many Master Pages as you like. 



As an alternative to allowing users to customize "the" Master Page for your 
site, you could have two Master pages. Use one fixed-and-unchanging Master 
Page for general pages. Then create a second Master Page for privileged con- 
tent only, and allow users to set styles within that Master Page only. 



Other Ways to Apply Themes 

In all of the above examples of applying themes, you used the syntax 

Page . theme=Prof ile . Pref erredTheme to apply the user's preferred theme 

to a page. Here's another syntax you can use as an alternative: 

Page . StyleSheetTheme = Prof ile . Pref erredTheme; 

The difference between using Page . Theme and using Page . StyleSheetTheme 
is as follows: 
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Page.Theme: The theme's style settings override any local style settings. 

Page.StyleSheetTheme: Behaves more like a Cascading Style Sheet — 
1 style settings still take precedence over styles defined in themes. 



Choosing one option or the other is largely a matter of personal taste. The 
advantage of using Page . Theme is that you know that whatever is defined in 
the theme "rules." You won't get any unpleasant surprises when a control or 
a chunk of text ignores the theme because you previously set some style 
that's now overriding your theme. 

The disadvantage to using Page . Theme is that if ever there was a need to 
override a theme-defined style for a particular control, there wouldn't be any 
way to do it, other than to create a special style rule for that one control. 

In the long run, you're probably better off sticking to the Page . Theme 
approach and allowing themes to take precedence. You don't want to end up 
with hundreds of controls on hundreds of pages, all doing their own things 
and ignoring your themes. That can just make using (not to mention main- 
taining) the site all the more confusing and more laborious. 



Defining a Site-Wide Default Theme 

In the code samples above, themes are applied to pages programmatically in 
the sense that code defines which theme is used for any given page based on 
the user's Pref erredTheme property. At a higher level, you can define a 
default theme to be used by all the pages in your site. You do so in the 
web. conf ig file for your site using either of the following syntaxes: 

<pages theme=" ThemeName" /> 

<pages styleSheetTheme =" ThemeName" /> 

where ThemeName is the name of a theme folder. For example, if you create a 
theme folder named DefaultTheme, and want to apply that theme to all pages 
in the site, you add the following line to your web . conf ig file: 

<pages theme=" DefaultTheme" /> 

Be sure to put the tag between the <system.web> and </system. web> tags 
in web . conf ig (as in Figure 10-18). 
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Figure 10-18: 
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<prof ile> 

<properties> 
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<add name= "LastName "/ > 
Odd name="Addi:essl"/> 
Odd nai[ie="Address2 "/> 
Odd naioe="City"/> 
Odd naioe="StatePi:ovince"/> 
<add naitie= ,r ZIPPo3talCode"/> 
odd narne= "Country" def aultValue="U5A"/> 
<add name="Pref erredTherne" def aultVa lue= "Def ault Theme" 
</propet:t ies> 
</prof ile> 

<pages theme="Def aultTheme" /> 

</ system. web> 
</conf iguration> 



The beauty of this approach is that every page opens with the default theme 
applied, instead of with no theme applied. As you create and review your 
pages, you know exactly where each item's style is coming from. 




The default theme is only the default, in the sense that it's applied only when 
something else doesn't override it. Any theme that's applied programmati- 
cally will override the default theme. 
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In This Chapter 

Exploring database design 

Designing a database with tables and primary keys 
Creating your own SQL Server tables 
Linking tables 



J\ big part of any dynamic data-driven Web site is the database that con- 
v \ tains data for the site. Visual Web Developer allows you to use either 
Microsoft Access (.mdb files) or SQL Server 2005 (.mdf files) for storing data. 
Of the two, a SQL Server database provides better scalability and supports a 
greater number of simultaneous users. That's why it's the database most 
people will likely want to use (or would, if they knew what we know), so 
that's the one that gets the focus in this book. 

As its title suggests, this chapter is a quick crash course in using SQL Server 
as the database for your Web site. You'll discover what SQL Server is, and 
how to create tables to store the data your Web site needs. You'll also get the 
lowdown on SQL, Structured Query Language, the tool you use to extract spe- 
cific data from the database to display on Web pages. If you're already familiar 
with a database program like Microsoft Access, the most noticeable feature of 
SQL Server is that it has no user interface — no program window you can 
open from the Start menu. There's no table designer, no forms designer, noth- 
ing. The reason for that is simple: Microsoft Access is an application program 
that has to perform multiple tasks for a wide range of users — but SQL Server 
is a lot more specialized; it's just a server. 

As a server, SQL Server 2005 is designed to provide data storage and Access 
to some other program rather than to a human who is sitting at the mouse 
and keyboard. The working interface for SQL Server isn't in its own separate 
program window. It's right in Visual Web Developer. 
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design is an enormous topic that could easily fill several books the 
size of this one — and has — so I can't get into all the details here. But I can 
get you in the ballpark and clear up some of the important buzzwords that 
apply to all relational databases. 



Tables, routs, and columns 

The data (information) in a SQL Server database is organized into tables. Each 
table consists of rows (also called records) and columns (also called fields'). 
Figure 11-1 illustrates the terms, using a sample table named items. The field 
names (that is, the column names) are itemid, Ourltemid, itemName, and 
itemPrice. The table contains five rows (records), which happen to be num- 
bered 10001, 10002, 10003, and so forth. 



Rows (records) 



Columns (fields) 



Figure 11-1: 

A sample 
database 
table. 



Itemid 


Ourltemid 


ItemName 


Itemrrice 


p-10001 


BWG-101 


Introduction to Bird Watching 


129 95 


--10002 


BWG-201 


Intermediate E-ird Watching 


$29.95 


- -10003 


BWG-301 


Advanced Bird Watching 


539 55 


-1 d 


RWG-101 


Introduction to Reptile Watching 


E29 55 


L-10005 


RWG-401 


Recovering from Reptile Wounds 


$49 95 



When you set up your site for Membership, VWD automatically creates several 
tables for you. To see those tables, first make sure your Web site is open in 
Visual Web Developer, then click the Database Explorer tab or choose ViewO 
Database Explorer from the menu bar. 

To see the tables that are already in your database, expand the Data Connec- 
tions, ASPNETMDF, and Tables categories (if they're showing a + sign). Each 
item under the Tables heading represents a single table of data. The names of 
tables that VWD automatically creates all start with aspnet_ as shown in 
Figure 11-2. 

Each one of those tables contains rows and columns. To see the actual data 
that's stored in a table, right-click the table name and choose Show Table 
Data. For example, if you right-click aspnet_users and choose Show Table 
Data, the aspnet_users table opens. The table will contain one record for 
each user account you've created. 
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For example, by the time I got to this part of the book, I had created seven 
user accounts through the Web Site Administration Tool. Every account you 
create becomes a record in aspnet_users. So opening my aspnet_users 
table shows that it contains seven records, as shown in Figure 11-3. 



Figure 11-3: 

The 
aspnet 

Users 
table data. 
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Userld 
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Alice 


slice 


■VUL 
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f572aled-355... 


Bob 


bob 


NULL 


False 




1775... 


66cd551e-470... 


Carol 


carol 


NULL 


False 




1775... 


rj0a35f 8e-34c, , , 


Eeks 


eeks 


NULL 


False 




1775... 


8all6cb2-450... 


Newti e 


newbie 


NULL 


False 




1775... 


9b6fc4eO-F29b... 


TestMember 


test member 


NULL 


False 




1775... 


Hc650de-0b0... 


Testy 


testy 


NULL 


False 




Don't add, change, or delete data in any of the aspnet_ tables manually 
through Database Explorer. Always use the Web Site Administration Tool to 
manage membership data. 



To close an open table, just click the Close (X) button in the upper-right 
corner, just as you'd close anything else that's open in the Design surface. 



One*to*many, many*to*many 

SQL Server 2005 is a relational database-management system (RDBMS) that 
not only stores data, but can also define multiple relationships among items 
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of data. It, and other products like it, exist mainly because in the real world, 
there are natural one-to-many relationships among different types of data. For 
suppose your site offers some kind of items to users. The items 
products you sell, courses you offer, Web seminars that people sign 
up for, or something like that. 



In cases such as these there are two natural one-to-many relationships 
between users and the items being offered: 

i>* Any one user might purchase many items. 

V Any one item might be purchased by many users. 

Any time you have two one-to-many relationships like that, you have what's 
called a many-to-many relationship. You have many users purchasing (or 
enrolling in, or attending) many items. 

To illustrate, let's look at simplified versions of the aspnet_users table and a 
table of items that the site offers to users. At the left side of Figure 1 1-4 is a 
table showing a couple of columns and some rows from a table of users. Each 
record in that table represents a single user account. 



Users 



Figure 11-4: 

Sample 
aspnet 
Users and 
Items 
tables. 
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On the right side is a simple items table. Each record in that table represents 
a single item offered to users. In between the two tables is the burning ques- 
tion "How do I connect these?" The answer is pretty straightforward: "By cre- 
ating a third table that keeps track of who purchased what." 

It might help to think of it this way. Each time a user purchases a product, that's 
a transaction. You need to keep track of these transactions — specifically, 
who purchased what — and that requires two pieces of information per 
transaction: who (a Userld), and what (an itemld). 

So, at the very least, this third table (which I'll name Transactions) must con- 
tain two fields: One field to record the user's identification (userld), and the 
other to record the item purchased (itemld). You can imagine this as a table 
with two fields named userld and itemld between the aspnet_users table 
and the items table. 
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Now, imagine that user Carol (userid 66cd. . .) purchases item 10003. The 
Transactions would need a new record with 66cd in its userid field and the 
its itemid field. If you then trace an imaginary line from the user to 
action to the item, you'll see how the record in the Transactions 
table provides the link from a specific user to a specific item purchased, as in 
Figure 11-5. 
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Every time a user purchases something, the Transactions table grows by 
one record. As time goes by, the Transactions table continues to grow, per- 
haps to thousands of records. Each record represents a single transaction 
where a specific user purchased a specific product. 

Recall that the natural many-to-many relationship between users and items is 
actually two one-to-many relationships. Any one user might purchase many 
items, and any one item might be purchased by many users. The Transactions 
table provides the "map" that allows code to find all transactions by any 
one user. 

No matter how many records are in the Transactions table, that table still 
provides the one-to-many link from users to items. To illustrate, pick one 
user, such as Carol (userid 66cd. . .). Each record in the Transactions 
table that has 66cd. . . is a transaction made by that user. The itemid field 
in Transactions identifies exactly which item the user purchased, as shown 
in Figure 1 1-6. 
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There's also a one-to-many relationship between items and users. The 
Transactions table, once again, provides the map describing which users 
d an item. Pick any one item, say 10003, from the items table. Find 
the Transactions table that have 10003 in their itemid field, and 
you have a link back to each user that purchased that product, as shown in 
Figure 11-7. 
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In real life, of course, you don't draw lines between records in tables to get 
information. In fact, you don't look at the tables at all — instead, you create 
queries to get information. 

However, while I'm on the subject of lines that connect things between tables, 
any time you extract data from all three of the tables (users, transactions, 
and items), your query must contain fields of all three tables. And the pri- 
mary and foreign keys that link the tables must be connected by join lines in 
that query, as shown in Figure 11-8. We'll discuss the roles of the primary and 
foreign keys in detail as we progress through the chapter. 
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So that's how database design works, in a conceptual sense. When there is a 
natural many-to-many relationship between items in two separate tables, you 
need a third table that contains records stating who purchased what. That 
third table provides the many-to-many link needed to extract meaningful data 
from the tables. 
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However, if you were to try this technique right now — using only what's 
covered in the book up to this point — there's a good chance yours wouldn't 
t's because there are rules to follow to get this sort of thing to work — 
rticular: 



v 0 Every table on the "one" side of a one-to-many relation must have a pri- 
mary key, a field that uniquely identifies each record in that table. In this 
example, both the users and items tables must have a primary key 

V The transaction table must contain at least two fields whose names and 
data types match the names and data types of the two tables on the 
"one" side of the relationships. 

To understand and apply those rules, the first order of business is to under- 
stand data types and primary keys. Let's start with data types. 



SQL Sertfer Tables 

Every column in every table has a data type that defines the type of data 
stored in the column. To view each column's data type, open the table defini- 
tion, rather than the table data. When you open a table definition, you don't 
see any of the actual data that's stored in the table. Instead, you see the struc- 
ture of the table. The table's structure shows the name, data type, and 
whether the field allows nulls. 

To see an existing table's structure, right-click the table's name in Database 
Explorer and choose Open Table Definition, as shown in Figure 11-9. 
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For example, if you right-click the aspnet_users table in Database Explorer 
and choose Open Table Definition, you see field names listed down the left 
side of the grid that opens. Each of those names represents a column that 
appears at the top of the aspnet_users table when you're viewing the 
table's data. To the right of each field name is the Data Type of that field, as 
shown in Figure 11-10. 
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Here's what the table definition for the built-in aspnet_users table tells you 
about columns in that table: 

i>* There are seven fields (columns) in this table, their names are listed in the 
Column Name column (Applicationid, Userid, UserName, and so forth). 

v* The data type of each field is visible just to the right of the field name. 
For example, both the Applicationid and userid columns are of the 
uniqueidentifier data type. 

J*" The userid field is the primary key for this table, as indicated by the 
key symbol to the left of its name. 

V When entering new records into this table, it's okay to leave the 
MobileAlias field empty (because its Allow Nulls check box is 
selected). But no other fields in the record can be left blank. 

Never change or remove anything in any aspnet_ table's structure. Those 
tables are created and used by the membership system and any changes you 
make could cause the whole membership system to stop working. 

When you're creating your own tables, it's important to choose data types 
wisely. A field's data type defines what you can put into the field — and what 
you can do with the information stored in that field. The main data types 
available to you in SQL Server 2005 Express are categorized as follows: 

Text: Character data like the text you're reading right now, people's 
names, product names, and so forth. 

i>* Number: Also called scalar values, these are real numbers like quantities 
and dollar amounts on which you can do math. 

u* Date/Time: Dates and time of day. 

V Boolean: A value that can be only True or False. 

Binary: Pictures and other kinds of data that aren't text, numbers, 
or dates. 

Other: Specialized data types such as uniqueidentifier, xml, 
timestamp, and sql_variant. 
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The most common type of information stored in tables is text, so we'll look at 
the text data types first. 



es for storing text 

In the computer biz, a chunk of text is referred to as a string, shorthand for "a 
string of characters." The following are all examples of strings: 



f Banana 

i>* Andy Adams 

V 123 Oak Tree Lane 



i>* Hello world, how ya doin' today? 
V (215) 555-1234 (phone number) 
f 123-45-6789 (Social Security number) 
00453-4321 (ZIP Code) 



Phone numbers, social security numbers, and ZIP codes are not true numbers 
(scalar values) that you'd ever add, subtract, multiply, or divide. So they must 
be stored as strings (usually the char data type) rather than as numbers. If you 
use a number data type for any of those fields, you won't be able to use leading 
zeroes in Zip codes (like 01234), or use parentheses and hyphens in phone 
numbers, because such things are not allowed in scalar values. 



Text comes in two basic flavors: 



Unicode text: Requires two bytes (16 bits) per character and can 
include characters from virtually any human language. 

*** Non-Unicode text: Uses only one byte (eight bits) per character, but is 
limited to characters in the English alphabet. 

You always want to be efficient in how you store data. So if a field should con- 
tain only English characters (A-Z) and such, a non-Unicode data type would be 
most efficient. But, given that we live in a Web-connected world, you may often 
need characters from other languages, in which case you'd use a Unicode data 
type — and storing the data would cost you twice as much disk space. 

When defining a field to store either type of text, you can choose between 
fixed-length and varying-length. Fixed-length is more efficient when all the 
values stored in the field are the same length, or very similar in length. For 
example, if you were to create a field to store product identifiers, and all the 
product identifiers follow a similar pattern — say, abc-123 — then a non- 
Unicode fixed-length text field would be ideal. In the abc-12 3 example, a fixed 
length of 7 characters would do the trick (the hyphen counts as a character). 

Often, there's no way to predict how much text a field will store. For example, 
if the field is storing text that people have typed into a form, there's no telling 
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exactly how many characters a given user might type. You would want to use 
a variable-length text field for that sort of thing. The amount of storage space 
p store each string would be roughly equal to the length of each string. 



Given that there are two types of text (Unicode and non-Unicode), and two 
ways to define string length (fixed-length or variable-length), there are four 
main data types for storing text data. The length of string allowed in the field — 
represented by n in the list that follows — determines how much storage 
space is required to store data in the column: 

char(n): Fixed-length non-Unicode text where n defines the actual 
length of each string. 

nchar (n) : Fixed-length Unicode text, where n defines the actual length 
of each string. 

v* varchar (n) : Variable-length non-Unicode text where n defines the maxi- 
mum length of a string stored in the field, up to 8,000 characters. 

f nvarchar (n): Variable-length Unicode text, where n defines the maxi- 
mum length of each string, up to 4,000 characters. 

Notice the pattern of the data type names. The names of data types that store 
Unicode data start with the letter n (for national), as in nchar and nvarchar. 
Data types that store variable-length strings all contain var, as in varchar 

and nvarchar. 



For truly enormous chunks of text, SQL Server offers varchar (max) and 
nvarchar (max) , which can store strings containing up to two billion charac- 
ters. But let's stick with the data types most commonly used in Web sites 
for now. 

Number data types 

In the computer world, the term number usually refers to actual scalar values, 
the kinds of numbers on which you can do math. That includes things like 
quantities and dollar amounts. As mentioned, it doesn't refer to types of data 
we casually refer to as numbers in day-to-day speech (such as phone num- 
bers, Social Security numbers, or ZIP codes). 




Scalar values come in two basic flavors: 



Integers: These are whole numbers with no decimal point. 

Floating-point numbers: These types of scalar values can contain a deci- 
mal point as in 0.10 or 123.45 or 12,345,678.987654321. There are also cur- 
rency data types specifically used for storing dollar amounts like $99.99. 

Starting with integers, there are four data types to choose from. Each provides 
for a range of acceptable numbers, and each has its own storage requirements. 
You want to choose the smallest one you can, but make sure it's not too small 
to store the kinds of numbers you'll need. 
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For example, if the field is going to store a number between 1 and 10, then the 
tinyint data type will do just fine, because it can store numbers from 0 to 
f field will be storing much larger numbers — perhaps up to two bil- 
ome other value with a long string of zeros) — use the int data 
type. Here are the integer data types and the range of values each can store: 



tinyint: From 0 to 255 
smallint: From -32,768 to 32,767 
int: From -2,147,483,648 to 2,147,483,647 

bigint: From -9,223,372,036,854,775,808 to 9,223,372,036,854,775,807 

For storing dollar amounts, your best bet is to use the smallmoney or money 
data types. For unit prices, you could probably get away with the small - 
money data type, unless some of your products cost more than $200,000.00. 
For larger monetary values, use the money data type. Here is the range of 
values each data type can handle: 

Ii/* smallmoney: From about -$214,748.00 to about $214,748.00. 
V money: From about -$922,337,203,685,477.00 to about 
$922,337,203,685,477.00. 

Floating-point numbers are for really big or precise numbers used in math 
and science, probably not the kind of thing you'd use much in a Web site — 
unless, of course, the Web site is about math or science. Several data types 
are available for storing floating-point numbers. I imagine the most com- 
monly used would be the decimal data type. 

With the decimal data type you can define a numeric value in terms of both 
precision and scale. The precision defines the total number of numeric digits 
in the number, the scale defines the number of digits to the right of the deci- 
mal point. For example, the number 1234.5678 has a precision of eight 
(because it contains 8 numeric characters) and a scale of 4, because there 
are four numbers to the right of the decimal point. 

The maximum precision is 38 digits. The scale can be anywhere from zero (no 
digits to the right of the decimal point) to whatever the precision value is set 
to (all numbers to the right of the decimal point). For example, a field with 
its data type set to decimal (38,18) could contain 38 numeric digits, with 
18 of them to the right of the decimal point. So a field could store a number 
like this: 

99,999,999,999,999,999,999.999999999999999999 

Other data types that can store floating-point numbers include numeric, 
float, and real. (Their ranges are shown in Table 11-1 later in this chapter.) 
It seems unlikely you'd use those in a Web site, so let's just keep forging 
ahead with the more likely data types here. 
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Boolean (bit) data type 

field is one that can contain only one of three possible values, 
alse), or 1 (True). In SQL Server, you use the bit data type to 
oolean field. Back in Figure 11-10, the isAnonymous field is the bit 
data type because it can contain only two possible values. A user is either 
anonymous (True) or isn't anonymous (False). 



The bit data type is the same as the Yes/No data type in Microsoft Access, in 
case you happen to be familiar with that product. 

Data types for date and time 

There are two main data types for storing dates, date time and small date- 
time. The smalldatetime data type will usually do the trick as it can store 
dates from January 1, 1900 to June 6, 2079. If your database needs to store 
dates outside that range, you can use the datetime data type, which can 
handle dates from January 1, 1753 to December 31, 9999. 

The uniqueidentifier data type 

The uniqueidentif ier data type defines a field that can store a GUID 
(Globally Unique Identifier). A GUID is a long string of characters that looks 
something like this: 

8all6cb2-4503-4f83-870e-4fa50bee923a 

The tables that Visual Web Developer creates for membership use the 
uniqueidentif ier data type for the ApplicationlD and UserlD fields. For 
example, if you right-click aspnet_users in Database Explorer and choose 
Show Table Data, you'll see a record for each user account you've created so 
far. If you widen the first two columns enough to see the full contents of each, 
you'll see that each contains a GUID, as shown in Figure 11-11. 
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You may be wondering where all the weird GUIDs came from. The Application 
id identifies your entire Web site, and is automatically created when you first 
set up membership for your Web site. It's the same for each user because 
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each user is a member of the current Web site. The userid is automatically 
created each time you create a new user account through the Web Site 
ration Tool or the CreateUserWizard control. 



So what does the GUID value mean? Absolutely nothing. And that's the whole 
point. It's a randomly-created value that has no meaning. But it's still a good 
thing because it's guaranteed to be unique, and uniqueness is a critical factor 
in fields that might be used as primary keys. Think of it as being like a 
person's Social Security number. Everyone has one, but no two people have 
the same one. The Social Security number has no "meaning" — you just take 
whatever Social Security number you get handed. 



Actually, your Social Security number is a primary key in the government's 
databases. Your Social Security number uniquely identifies you among all the 
millions of people in the country, because nobody else has the same Social 
Security number that you do. 

The Applicationid is a unique identifier for your Web site. In the 
aspnet_users table, every record has the same Applicationid value in its 
field. That's because each of these users is a member of the same application 
(which means Web site in this case). 

The userid field is the random GUID assigned to each user automatically 
when you (or a user) creates a user account. No two users will ever have the 
same userid. And once entered, a user's userid never changes. Even users 
who change their own userNames will still belong to the same user accounts 
they initially created — because the userid value won't change. 



Assigning GUlDs automatically 

Every time you or someone else creates a new user account, that new 
account automatically is assigned a GUID. The reason has to do with the 
Default Data Value or Binding column property for the field. If you click 
on the userid field name in the table definition, then look at that property, 
you'll see it contains (newid ( ) ) as shown in Figure 1 1-12. 
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That newid ( ) property is what makes that field in that record receive a value 
automatically each time a record is created. If you looked at the Default 
Data Binding property for the Applicationid field, you would 
newid ( ) there. That's because the Applicationid field does not 
get a new, random value each time you create a record. The value in that field 
is always the same, the GUID that specifically identifies your Web site. 

,^X^f\ m as pnet_users, the Applicationid field provides a link to the aspnet_ 

Applications table. In aspnet_Applications , the Applicationid field 
is a primary key. 

The data types I've discussed so far don't represent the full set of SQL Server 
data types, just the ones you're most likely to use in your Web sites. For future 
reference, Table 11-1 summarizes all these data types. For more detailed infor- 
mation on data types, a heftier list of them, or any other facet of SQL Server, 
refer to SQL Server Books Online or a book that's strictly about SQL Server 2005. 




Table 11-1 



Summary of SQL Server 2005 Data Types 



Data Type 



Used to Store 



Space Consumed 



bigint 



Integers from-2 A 63 



8 bytes 



to 2 A 63 - 1 
(9,223,372,036 


,854,775,807) 




binary (n) 


Fixed-length I 
where n can 
from 1 to 8,00 


jinary data, 
be any value 
D 


n bytes 




bit 


1,0, or Null 




1 byte per 8 bit 


fields 



char (n) 



Fixed-length text, where/? n bytes 

can be from 1 to 8,000 



datetime Dates from January 1, 1753, 

through December 31 , 9999, to 
3.33 milliseconds of accuracy 



8 bytes 



decimal (p, s) 



Numbers from-10 3S + 1 
to 1 0 38 — 1 



Depends on p 



float (n) Numbers from -1.79E + 38 

to -2.23E - 38, 0, and 
2.23E-38 to 1.79E + 38 



Depends on n 



image 



Variable-length binary data to 
2 3, - 1 (2,147,483,647) bytes 



length + 2 bytes 
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Integers from-2 A 31 
(-2,147,483,648) to 2 A 31 - 1 
(2,147,483,647) 



money 



Dollar amount from 
-922,337,203,685,477.5808 
to 922,337,203,685,477.5807 



ntext 



Variable-length Unicode 
data or binary data to 
2 30 - 1 bytes 



small int 



Integers from-2 A 15 
(-32,768) to 
2 A 15- 1 (32,767) 



smallmoney 



Dollar amounts from 
-214,748.3648 to 
214,748.3647 



sql_variant 



Non-specific data type 
up to 8,016 bytes 



text 



Variable-length text to 2 31 -1 
(2,147,483,647 characters) 



timestamp 



Time of last change to row 



tinyint 



Integers from 0 to 255 



Space Consumed 



4 bytes 



8 bytes 



nchar(n) Fixed-length Unicode text 2*length 

to 4,000 characters 



Tlength bytes 



numeric (p, s) Numbers from 
to 1 0 3S — 1 


-10 38 +1 


Depends on p 




nvarchar (n) Variable-length Unicode 
text up to 4,000 characters 


Tlength + 2 bytes 


nvarchar (max) Variable-length Unicode 
data to 2 3, "2 bytes 


Tlength + 2 b< 


{tes 


real -1.18E-38, 0 and 1.18E-38 
to 3.40E + 38 


4 bytes 




smalldatetime Dates from Ja 
through June ! 
accurate to 1 1 


nuary 1, 1900, 
3, 2079, 
ninute 


4 bytes 





2 bytes 



4 bytes 



Depends on data stored 



Depends on code page 
of server 



8 bytes 



1 byte 



(continued) 
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Table 11-1 (continued) 


\ fat&pe 


Used to Store 


Space Consumed 


unique- 
identifier 


GUIDs (Globally Unique 
Identifiers) 


16 bytes 


Varbinary (n) 


Variable-length binary data, 
where n can be 1 to 8,000 


length+2 bytes 


varbinary 
(MAX) 


Variable-length data up to 
2 31 - 1 bytes in length 


length + 2 bytes 


varchar (n) 


Variable-length text where 
n can be from 1 to 8,000 


n+2 bytes 


varchar (MAX) 


Variable-length text up to 
2 31 - 1 bytes in length 


length + 2 bytes 


xml 


Typed or untyped XML data 


Depends on data stored 



Creating \lour OuJn Tables 

Even though you never want to change, rename, delete, modify, annoy, 
pester, improve, or in any other way alter aspnet_ tables, you can certainly 
create your own tables. Before you can put data into a table, of course, you 
have to create an empty table. To create your own SQL Server tables, work in 
Database Explorer — right-click on the Tables folder and choose Add New 
Table as shown in Figure 1 1-13. 



Figure 11-13: 

Creating a 
new table. 



Database Explorer 



. Data Connections 
S Dfe ASPMETDB.MDF 

+ _ Database Diagrams 
-i J Tables 

Si 3 iJ» 

+ .1 asp 

New Query 



Add New Table 



M asf 

3 asp _|] Refresh 

_1 asp 

j asf j_j Properties 

91 aspnet_Roles 

Si aspnet_SchemaVersions 

Jl aspnetJJsers 



The next step is to define the columns (fields) that the table will contain; give 
each field a name of your own choosing. Make it a short name with no spaces 
or punctuation marks. Then you have to choose a data type for each field, 
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and decide whether or not the field can be left blank when adding new 
records to the table. 

DropBooks 

Defining a primary keif 

If the table you are creating will be on the "one" side of a one-to-many rela- 
tionship, then that table must have a primary key. The primary key field must 
contain a value that's unique to each record in the table. The field need not 
have the uniqueidentif ier data type, but it should have some kind of field 
that's automatically assigned a random, unique value each time a record is 
added to the table. 

Another name for a primary key is identity, because the value in a record's 
primary key field is also the record's unique identity. 

A good primary key should contain a value that's assigned to the record ran- 
domly, so the key has no "meaning" to humans. Amateur database designers 
often make the mistake of trying to make the primary key a field that is mean- 
ingful to humans. Resist the temptation to do that; you'll save yourself a 
world of headaches if you just let SQL Server manage the primary key for 
you, and keep it hidden from everyone. 

In the items table shown way back in Figure 11-1, the itemid field is the pri- 
mary key. I didn't use a GUID (although I could have). I used a five-digit 
number starting at 10001. That number is not something I typed in myself; 
it's assigned to the record automatically each time a record is added to the 
table. Like a GUID, that number has no meaning — and, once entered, it can 
never be changed. 

If you're not going to use a GUID for a primary key, your next best bet would 
be an auto-numbered integer (int) field. That's how I created the itemid 
field in my sample items table, and here are the steps required: 

1. In the Column Name column, type a name for the field you're about to 
create. 

2. In the Data Type column, choose one of the integer data types. 

If you're not sure which to use, choose the int data type. 

3. Clear the check mark (if any) from the Allow Nulls check box. 

A primary key cannot be left blank, so nulls cannot be allowed here. 

4. Right-click the field name in the left column and choose Set Primary 
Key, or click the field name and choose Table DesignerOSet Primary 
Key from the menu. 

You should see a small key symbol to the left of the field name. For exam- 
ple, in Figure 11-14, 1 created a field named itemid that has the int data 
type, does not accept nulls, and is defined as the table's primary key. 
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Figure 11-14: 
|e|J 

table's 
primary key. 



dbo.Tablel: T...A5PNETDB.MDF)* 




X 


^ \f a^^nName Data Type 


Allow Nulls 






□ 




r_r ^ □ 









To have the records automatically numbered as they're entered into 
the table, first click the + sign next to identity Specification in 
the Column Properties pane. 

Set the (is identity) property to Yes. 

Set the Identity Increment and Identity Seed properties to whatever 
number you want to appear first in the table. 



In Figure 11-15, I've set the Identity Seed to 100 01 and left the Identity 
Increment at 1. That means that the first record added to the table will auto- 
matically be assigned 10001. Subsequent records will be numbered 10002, 
10003, 10004, and so forth. 



Figure 11-15: 

Here the 
primary key 
field will 
be auto- 
numbered, 
starting at 
10001. 



dbo.Tablel: T...ASPNETDB.MDF)* 


~ X 


Column Name 


Data Type 


| Allow Nulls | 




►<j?| Iternld 


int 


□ 




□ 


□ 








Column Properties 












Mil is 






Has Non-SQL Server Sub 


No |T 






Identity Specification 


Yes 






(Is Identity) 


Yes 






Identity Increment 


1 






Identity Seed 


10001 





























Creating text fields 

When you define a text field using any of the previously described char data 
types, you can use the Length property in the Column Properties to set the 
size of the field in characters. When you're using a fixed-length data type 
such as char or nchar, every field is stored using the exact number of char- 
acters you define as the field's Length. If you use one of the variable-length 
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data types, the Length property defines the maximum number of characters 
that can be stored in the field. 



ipBooks 

ins one fo 



s table I'm building here could use at least three text fields, includ- 
ing one for an in-house itemid. Although it would be a bad idea to use a 
"meaningful" field like that as a primary key, there's no harm in including it as 
a field in the table. For my example, I name the field Ourltemid and make it a 
fixed-length text field (char) of 7 because my in-house codes all look like 
bwg-101, bwg-102, and so forth. 

I'll also add a text field to store the name of the item, and another text field to 
store a lengthier description of the item. I'll name these fields ItemName and 
ItemDescription. There's no way to predict exactly how many characters 
an item name or description might be, so both of these will be variable-length 
text fields. I'll put a maximum length of 64 characters on the ItemName field, 
and a maximum length of 2,048 characters on the description. You should use 
field lengths that meet the needs of your own site's data storage. 



To create text fields, follow these steps: 



1. Type the field name in the Column Name property. 

2. Choose one of the text data types from the Data Type column's drop- 
down list. 

3. Set the Length property in Column Properties to the maximum 
number of characters to be stored in the field (or just type a new 
length between the parentheses in the Data Type column). 

Figure 11-16 shows an example where I've created three more fields for the 
Courses Items table. You can see the Length property near the bottom of 
the figure in the Column Properties pane. 



Figure 11-16: 

Three text 
fields added 
to the table. 



dbo. Table 1: T...ASPNETDB.MDF)* 




P X 




Column Name 


Data Type 


Allow Nulls 






J Itemid 


int 


□ 




_ 


Ourltemid 


nchar(7) 


0 






ItemName 


nvarchar(64) 


□ 




» 


ItemDescription 


nvarchar(2048) 
































Column Properties 
















;.: 11 .. 








B 








(Name) 


ItemDescription 








Allow Nulls 


No 








Data Type 


nvarchar 








Default Value or Binding 










Length 


2048 
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his is not an e-commerce book 



ryoTTTe WOnflennrn/vhen we're going to get to 
the part in this book where you actually sell 
things and do financial transactions, you can 
stop wondering. The answer is "never" — 
because there's really nothing built into Visual 
Web Developerto support that. 

The more likely scenario is that you'd use some 
third-party service or tool to add e-commerce 



capabilities. For example, you could create an 
account with Paypal and let people pay through 
that service. But that's just an example and not 
a topic that can be covered in this book. Sorry if 
my use of items, transactions, and money fields 
led you to believe otherwise. 



Adding a money field 

Data types for storing money don't require that you specify a Length prop- 
erty. It's a simple matter of entering a field name of your own choosing and 
choosing one of the money data types. For example, you could add a field 
named ItemPrice to the current table and give it the smallmoney data type 
(assuming you don't intend to charge $200,000 or more for a course — if 
you're selling bigger-ticket items, use the money data type rather than small - 
money). So the finished sample table design would look like Figure 1 1-17. 



Figure 11-17: 

Here all 
fields for the 
items table 
are defined. 



dbo.Items: Ta...SPNETDB.MDF)* 


Column Name 


Data Type 


| Allow Nulls | 


V Item Id 


int 


□ 


| Ourltemid 


nchar(7) 


□ 


| ItemName 


nvarchar(64) 


□ 


J ItemDescription 


nvarchar(2048) 


□ 


1 ItemPrice 


smallmoney 


n 


►1 


J 


□ 



Remember that my little items table is just an example. Your own table could 
contain many more fields. But for the purposes of this example, we can con- 
sider that table finished. 



Satfiny the nert table 

After you've defined the field names and data types for a table, click the 
Close (X) button in the upper-right corner of the Design surface. A dialog box 
asks if you want to save your changes. Choose Yes, and enter a name for your 
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table. (In my database, I named this table items.) Then click OK. The new 
table will be listed along with other tables that are already in the database. 



ipBooks 

Creating the Transactions table 



Creating the Transactions table is no different from creating the items 
table. However, there are lots of rules and details that need to be dealt with. 
To get started, right-click the Tables folder and choose Add New Table. You 
get the standard design screen for defining field names and data types. 

How you define the first two fields in the transaction table is critical. Because 
if you make even the slightest mistake, it won't work. In the Transactions 
tables, the two key fields are actually foreign keys, not primary keys. (A for- 
eign key has the same name and data type as a primary key in a table, on the 
"one" side of a one-to-many relationship.) 

For example, there is a one-to-many relationship between users and transac- 
tions. In the users table, the userid field is the primary key that uniquely 
identifies each user. In the Transactions table, the userid field (alone) 
cannot be marked as a primary key, and should never be automatically 
assigned a value using newid ( ) or an identity Specification. 

So, the first field in this example's Transactions table must be named 
userid, must be the uniqueidentifier data type, and must have its Allow 
Nulls check box blank (because records with no value in this field would be 
useless). The Default value or Binding property for the field must be left 
empty as shown in Figure 1 1-18. 



Figure 11-18: 

First field 
in the 
Transac- 
tions table 
defined. 



dbo.Table2: T...ASPNETDB.MDF)* 

Column Name Data Type 



► Userid 

J 



Column Properties 



uniqueidentifier 



B (I.eneral) 
( Nam-:-) 
Allow Nulls 
Data Type 

Default Value or Binding 

IB Table Design 



uniqueidentifier 



□ 
□ 



The Transactions table also needs a field that provides a link to the pri- 
mary key in the items table. The primary key in the items table is named 
itemid and its data type is int. In the Transactions table, the itemid field 
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d Books 

record tra 



must not be auto-numbered and must not allow nulls. So its identity 
Specification property must be set to No, as shown in Figure 11-19. 



int in time, the Transactions table has all the fields it needs to 
record transactions and provide the links between users and items. Even 
though the table must contain the two fields just created here, there's no rule 
that says it can't contain other fields as well. 



Figure 11-19: 

Second field 
in the 
Transac- 
tions 
table. 



dbo.Table2: T...ASPNETDB.MDF)* 

Column Name Data Type 



Userld 
Itemid 



uniqueidentifier 



~ X 

Alloa Nulls 



□ 
□ 



□ 



Column Properties 






I* 


E Identity Specification 


No 




Yes ca 




E 



For example, if you wanted to record the date of each transaction, add a 
smalldatetime field. If you want to keep track of whether a transaction has 
been paid, add a bit field. If items are such that a user might buy several of 
them at a time (say, pencils or kumquats), your Transactions table could 
include a Qty field to indicate how many items were purchased. If prices of 
items change over time, and you want to know exactly what the user paid in 
each transaction, you could include a SellingPrice field that records 
exactly what the user paid for the item. 

For the example in this book, I added two fields to my Transactions table: 
TransactionDate and its data type smalldatetime. The idea is to record 
the date and time of each transaction. I also added an IsPaid field and gave 
it the bit data type. In records, that field contains True for transactions that 
have been paid, and False for unpaid transactions. Figure 11-20 shows that 
sample Transactions table with the two additional fields defined. 



Figure 11-20: 

This sample 
Transac- 
tions table 
contains 
four fields. 



Column Name 


Data Type 


Allow Nulls 


| Userld 


uniqueidentifier 


□ 


| Itemid 


int 


□ 


j TransactionDate 


smalldatetime 


□ 


1 IsPaid 


bit 


□ 


B 




□ 
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A Primary Key for Transactions 



pned, if a table is on the "one" side of a one-to-many relationship, 
table must have a primary key to uniquely identify each record. In 
that regard, the Transactions table does not need a primary key because 
it's on the "many" side of its relationships with users and items. 

However, there is another rule in Visual Web Developer that states that if you 
want to be able to edit a table through a Web page, then that table must have 
a primary key. So if you want to be able to edit the Transactions table 
through Web pages, you'll need to give that table a primary key. 

As always, the primary key need not have any special "meaning" — it can just 
be a number that's automatically assigned to each new record, sort of like an 
order number on a paper order form. An automatically incremented int 
(integer) field will do nicely. 

Figure 11-21 shows an example where I've added a field named Transactionid 
to the Transactions table. As you can see in its Column Properties, I set the 
fields Is Identity to Yes, set the Identity Increment to 1 , and the Identity Seed to 
20000. You can use any starting number you like. I just opted to number trans- 
actions 20000, 20001, 20002, and so forth arbitrarily. I also right-clicked the field 
name and chose Set Primary Key to make the field the table's primary key. 



Figure 11-21: 

Final struc- 
ture of the 
Transac- 
tions table. 





Column Name 


Data Type 


Allow Nulls 






Userld 


uniqueidentifier 


□ 




Itemid 


int 


□ 






TransactionDate 


smalldatetime 


□ 






IsPaid 


bit 


□ 






Transactionid 


J int 















( ulurnri Properties ; 













Identity Specification 


Ves 








(Is Identity) 


Yes 






Identity Increment 


1 








Identity Seed 


20000 


L 












No 










V 



When you're done defining fields for the Transactions table, close and save 
the design as you would any other object. In my example, I named the table 
Transactions — as shown in Figure 11-21 — and it will be added to the list 
of other tables already in the database. For example, Figure 11-22 shows my 
list of tables after creating the new tables named items and Transactions. 
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Database Explorer 



^ * X 



Figure 11-22: 

Two new 
tables 
(items and 
Transac- 
tions), 
listed with 
othertables. 



(a Connections 
|A5PNETDB.MDF 

Database Diagrams 
I Tables 
B O aspnet_Applications 
±i t!H aspnet_Membership 
ijj - H3 aspnet_Paths 
±i u3 aspnet_PersonalizationAHUsers 
±i [HI aspnet_PersonalizationPerUser 
+ _J aspnet_Prohle 
+ M aspnet_Roles 
+ JH aspnet_SchemaVersions 
+ _J aspnet_Users 
±1 O aspnet_UsersInRoles 
±i Si aspnet_WebEvent_Events 
±i (3 Items 
±l O Transactions 
B| Views 

. ~~] Stored Procedures 
, ^ ] Functions 



c?p Solution Exploref \ Database Explorer 



Populating Tables 

When you first create a table, it will be empty. So when you right-click the 
table name and choose Show Table Data, you'll see an empty record with the 
word null in each field. For example, right-clicking an empty items table and 
choosing Show Table Data displays that table's contents. But because the 
table is brand new and empty, its contents consist of a single empty record 
that has the word null (which means, in effect, blank) in each field, as shown 
in Figure 11-23. 



Figure 11-23: 

Here's the 
Empty 
Items 
table, open 

and really 
empty. 



Items: Query(...\ASPNETDB.MDF) 

Itemld Ourltemld ItemName 
► HULL 



You can add data to the table just by replacing the nulls with the data you 
want to store. That's not the only way to do it, or even the best way. For exam- 
ple, you'd never want to type the data manually to populate the aspnet_ 
tables in the database (trust me on that one). You must use the Web Site 
Administration Tool, CreateUserWizard, and so forth to manage that data. 
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But, if you need some sample data to play around with in the tables you cre- 
ated yourself, you can manually type that data directly into the tables. It's not 
intuitive way to do it; there are some rules you have to play by. 




Never use the procedure described here to add data to any table whose name 
starts with aspNet_. Always use the Web Site Administration Tool to add, 
edit, and delete data in those tables. Use the method described only to enter 
some sample data into a table you created yourself. 

Here are some quick tips for entering data into fields: 

When you enter data into a record that contains an automatically- 
generated primary key (for example, the itemid field in the items 
table), you must leave that field empty (null). The field gets filled with 
a value automatically, after you've filled in other fields in the record. 

i>* When you're typing data into table fields, do not press Enter when you 
complete your entry. Instead, when you've finished filling one field and 
want to move on to the next, press the Tab key. Or just click the next 
field in which you want to enter or edit data. 

i>* The little pencil that appears after you fill in a field isn't part of the data 
in the field. It's only there to tell you the field has been edited since the 
table was first opened. 

When typing dollar amounts, don't type the dollar sign. There's no need 
to bother typing commas, either; they'll just be removed. For example, if 
you want to enter $1,234.56 into a money field, type 1234 . 56. In the 
Design surface, all dollar amounts have four digits to the right of the 
decimal point and no dollar sign. Don't let that bother you. As long as 
you're working in Database Explorer, how the data looks isn't important. 

If you don't have data to fill a field yet, you can leave the field empty 
(null), provided you allowed nulls in the design of the table. If you 
didn't, and you find that the table really needs to allow nulls in a field, go 
back to the table's definition and select the Allow Nulls check box for 
that field. 

After you've filled in all the fields for a record, you can press Tab or 
Enter to complete that record. SQL Server validates the data and saves 
the record. If there are any problems, the record won't be saved. Instead, 
you'll see an error message (stating No row was updated) with a 
description of the problem. You have to click OK in that message box 
and fix the problem. This fix often involves clicking the faulty value and 
then pressing Escape to "undo" the entry currently in the column. 

The example in Figure 11-24 shows where I've typed some sample (and fake) 
data into the items table. The itemDescription field contains much more 
text than can be displayed in the narrow column. But that text isn't impor- 
tant here. 
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Figure 11-24: 




80 

records to 
my items 
table. 



Items: Query(...\ASPNETDB.MDF) 



)l 


Itemld 


Ourltemld 
BWG-101 


ItemName 


ItemDescription 


ItemPrice 


Introduction to Bird Watching 


Stop being a PC . , . 


29.9500 




\pqjl2J 


BWG-201 


Intermediate Bird Watching 


Once you've ma... 


29.9500 




10003 


BWG-301 


Advanced Bird Watching 


Renowned ornit... 


39.9500 




10004 


RWG-101 


Introduction to Reptile Watching 


Sick of birds? Ho,,, 


29.9500 




10005 


RWG-401 


Recovering from Reptile Wound; 


Reptiles can stin,,, 


49.9500 


► 


NULL 


MAL 


MAL 


MAL 


MAL 



To widen or narrow a column, click and hold on the bar to the right of that 
column's name, and then drag left or right. 



I'll need some sample data in my Transactions table to illustrate upcoming 
concepts. So I opened that table and added the records below. It's imperative 
that the value in each record's userid field exactly matches an actual user's 
GUID in the aspnet_users table. So, to enter GUIDs into records, I copied 
and pasted actual GUIDs from the aspnet_Users table. The Transactionid 
values are entered automatically. So when you get to that field, just press the 
Tab key to move to the next record without typing a Transactionid number. 

Dummies beware! Typing the GUIDs shown in Figure 1 1-25 into your own table 
will not work. Every GUID you manually enter into your own Transactions 
table must exactly match an actual GUID from your own aspnet_Users table. 



Figure 11-25: 

Sample data 
in the 
Transac- 
tions 
table. 





Userid 


Itemld TransactionDate 


IsPaid 


Transactionid 




f572aled-3553-40c7-99ce-lad3bcece831 


10002 6/15/2006 12:00:00 AM 


True 


20000 




f572aled-3553-40c7-99ce-lad3bcece831 


10003 6/21/2006 12:00:00 AM 


True 


20001 




f 572al ed-3553-40c7-99ce- 1 ad3bcece83 1 


10005 6/25/2006 12:00:00 AM 


True 


20002 




6a 1 1 6cb2-4503-4f 33-870e-4f a50bee946a 


10003 6/3/2006 12:00:00 AM 


True 


20003 




00a35f 8e-34ce-4f b 1 -b7b4-8f 2792e9b799 


10002 6/17/2006 12:00:00 AM 


True 


20004 




00a35f 8e-34ce-4fb 1 -b7b4-8f 2792e9b799 


10003 6/21/2006 12:00:00 AM 


True 


20005 




66cd55 1 e-470c-4e57-9de3-d 1 97bb6abc93 


10003 6/1/2006 12:00:00 AM 


True 


20006 




66cd55 1 e-470c-4e57-9de3-d 1 97bb6abc98 


10004 6/2/2006 12:00:00 AM 


True 


20007 




66cd55 1 e-470c-4e57-9de3-d 1 97bb6abc98 


10005 6/20/2006 12:00:00 AM 


True 


20008 




bf93fd26-d 1 1 c-446c-b065-f d 1 de32 1 82dc 


10003 7/1/2006 12:00:00 AM 


True 


20009 




bf93fd26-dllc-446c-bD65-fdlde321S2dc 


10004 7/21/2006 12:00:00 AM 


True 


20010 




bf93fd26-dllc-446c-b065-fdlde321S2dc 


10005 7/27/2006 12:00:00 AM 


True 


20011 


► 


MAL 


MAL MAL 


MAL 


MAL 



At this point, I have all the tables that the membership system created, plus 
my items and Transactions tables. There is a natural many-to-many link 
between users in the Membership table and items in my items table. The 
Transactions table contains the fields necessary to link many users to 
many items, and also provides a record of who purchased what and when. 

At this moment, SQL Server is not "aware" that there are relationships among 
these tables. You have to describe the relationships by linking tables together 
in queries. 
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Linking Tables 
ipBOOKS 

vou need. 



the tables in a database store data, the way you get exactly the data 
you need, and only the data you need, when you need it, is through Structured 
Query Language, abbreviated SQL and often pronounced like sequel. You use 
SQL to create queries (also called SQL statements or select statements) — 
commands that describe exactly what data you want to retrieve from the data- 
base, and where to find that data. Here is an example of a simple SQL statement: 



SELECT * FROM Items 



This SQL statement, when executed, retrieves all columns and all records 
from the table named items. (The * is short for "all columns.") 

If you want to retrieve only certain columns of data from a table, replace the 
* with the names of the columns the SQL statement should retrieve. For 
example, the following SQL statement retrieves data from the userid and 
UserName (only) columns in the aspnet_Users table: 



SELECT Userid, UserName FROM aspnet_Users 



Both sample SQL statements just given retrieve all records from the table. 
The only time such an extraction doesn't happen is when that SQL statement 
includes a where clause, which specifies which records to retrieve. The 
where clause is often called a filter because it "filters out" any records you 
don't need. (Or, more accurately, it filters out the records that the current 
Web page doesn't need to show.) 

A where clause limits the records retrieved from the data to those records 
that meet some criterion. For example, this SQL statement retrieves exactly 
one record (not all records) from the items table: The record that has 10002 
in its itemid field: 



SELECT * FROM Items WHERE Itemid = 10002 



If you wanted just the itemName and itemDescription fields from the table, 
and only the records for item 10002, then you replace the * with the names of 
columns you want, as follows: 

SELECT ItemName, ItemDescription FROM ItemsTable WHERE Itemid = 10002 

Not to worry: You don't actually have to write the SQL statements yourself. 
And that's a good thing — SQL statements can be far more complex than the 
examples shown here. To avoid all that tedious and error-prone typing, you 
can use the Query Builder to create your complex SQL statements. The 
Query Builder lets you pick and choose what you want to extract from your 
tables with ease — and with a more intuitive graphical user interface. You 
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pick and choose options, the Query Builder then writes the appropriate SQL 
statement for you. 



y Builder appears automatically whenever you perform some action 
that requires getting data from a database. You'll see examples in upcoming 
chapters; in this chapter, as a general example, we use the Query Builder to 
link tables together into a view. 



Creating a View) 

In SQL Server, a view is a saved query. When you set up your site for 
Membership, VWD automatically created several views. They are listed under 
Views in Database Explorer. The name of each automatically-created view 
starts with vw_aspnet_ as shown in Figure 1 1-26. 



Figure 11-26: 
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Never delete, change, or rename any view whose name starts with vw_aspnet_. 
Those views are created by the membership system, for the membership 
system, and they really don't like being monkeyed around with. 



To illustrate using the Query Builder to link users, transactions, and items, I'll 
create a view named usersAnditemsview. You create a view as you would 
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any other object: Right-click the Views folder in Database Explorer and 
choose Add New View. A dialog box named Add Table opens. 




step in building the query is to choose the tables from which the 
query will get data. If there's a many-to-many relationship among selected 
tables, the view must also include the Transactions table that provides the 
link between tables. To add a table to the query, click its name in the Add 
Table dialog box, and then click OK. (For this example, I add the 
aspnet_Users, Transactions, and items tables to the view.) Click the Close 
button in the Add Tables dialog box after choosing your tables. 

If you forget to add a table before clicking the Close button, choose Query 
DesignerOAdd Table from the menu bar, or click the Add Table button in the 
toolbar. 

Each table you add appears as a field list in the Diagram pane at the top of 
the Query Builder. Each field list shows the names of fields within the table. 
You can move and size the field list's little windows by using standard tech- 
niques (drag the title bar to move, drag any corner or edge to size). In most 
cases, the lines connecting tables by their key fields are added to the field 
lists, as in Figure 11-27. 



Figure 11-27: 
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With the three items linked together, the next step is to choose which fields 
you want to see from these tables. You choose which fields you want the view 
to display by clicking the check box next to each desired field name. As you 
do so, each field name you check appears in the Criterion pane, just below 
the Diagram pane. 

Below the Criterion pane is the Show SQL pane, which shows the actual SQL 
statement that the Query Builder creates as you go. You can size those panes 
by dragging their borders up and down. You can choose which panes you 
want to hide by using buttons in the toolbar shown near the top of Figure 
11-28; the figure also shows how the query looks after you choose some field 
names from tables in the Diagram view. 
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Figure 11-28: 

Fields that 
the query 
should 
retrieve are 
selected. 
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While you're designing a query, you can test it out at any time using any of 
these methods: 

f Right-click some empty space in the Design surface and choose 
Execute SQL. 

Press Ctrl+R. 

V Click the Execute Query button (red exclamation mark) in the toolbar, 
f* Choose Query DesignerOExecute Query from the menu bar. 

The results of executing the query appear in the Results pane at the bottom 
of everything else. Figure 1 1-29 shows the results of executing the query from 
Figure 11-28. Although it might not look like much, at first glance, it could be 
the solution to many of your data processing problems. 



Figure 11-29: 
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Each record in the view's results represents a single transaction; the view 
always shows one record for every transaction made, up to the moment you 
;esults. In other words, if you ignored all fields except userid and 
ou'd see that the view contains exactly the same records as the 

Transactions table. 



However, the view offers a big advantage over the Transactions table alone. 
Each record in the view includes the user name, date of the transaction, paid 
status, Ouritemid, itemName, and itemPrice fields. In other words, the view 
contains a lot more useful information that the Transactions table provides — 
and offers greater control of your data in these ways: 

The way the data looks in the query results is of no importance. Users 
never see query results like those you're seeing in Web pages. They see 
the information in whatever format you present it to them — and you 
have near-infinite choices there. 

Any time you "call upon" a view for information, it returns all the fields 
shown in the current query results — including current data from the 
tables — but the view doesn't "contain" any data at all. Each time it's 
executed, it has no choice but to get the specified information from the 
tables that are currently in the database. 

A view can only be used to retrieve data from a table — not to edit data 
in the underlying table. That's an advantage because in a Web site, nine 
times out of ten you want a Web page to show data to the user but not to 
allow the user to edit the data. Why? Well (for instance), imagine an 
unscrupulous user editing the page to change the price of an item in 
your Items table to a penny — and then ordering 100 of them. . . . 

Using a view to access data from the tables provides the added security of 
knowing that a user cannot gain any access whatsoever to data in the tables 
from which the view retrieves its records. Also, the fact that the Web server 
doesn't need to fuss with editing improves overall performance; data moves 
faster to the user's page from the server. 

To save a view, click the Close button in its upper-right corner and choose 
Yes when asked about saving your changes. Name the view (I'll call this one 
usersAnditemsviewl) and click OK. The view name is added to the list of 
views in Database Explorer. 



A mare detailed (/ietf 

One weakness of the previous view is that it didn't include the user's e-mail 
address. It can't; the linked aspnet_users table doesn't contain the user's 
e-mail address. That bit of information is stored in the aspnet_Membership 
table. 
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There is, however, a view named vw_aspnet_Memi>ershipUsers already 
defined under Views in Database Explorer. You can use that view in place of 
et_users table to create a query that includes users' e-mail 
s. 



Creating another view named Detailedusersitemsview illustrates the point: 



1. Right-click the Views folder and choose Add New View. 

2. In the Add Tables dialog box, click the Views tab, click 
vw_aspnet_MemberhsipUsers, then click the Add button. 

3. In the Add Tables dialog box, click the Tables tab. 

4. Click the Transactions table, then click Add. 

5. Click the items table, then click Add. 

6. Click Close in the Add Tables dialog box. 

7. In the diagram pane, drag the userid field in the vw_aspnet_ 
MembershipUsers field list to the Userid field name in the Transactions 
table. The two fields will then be connected by a line as shown in 
Figure 11-30. 



In Figure 1 1-30, 1 sized and arranged things so you can see all the field lists 
and the lines joining the tables by their key fields. 
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The query can return any fields from any table you see. In Figure 11-30, 1 
chose some fields that might come in handy in the future. However, you can 
choose any fields you like. 

Executing the query returns a set of records similar to those from the less- 
detailed query — exactly one record per transaction shows up in the query 
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results. However, this view offers more information about who made each 
purchase — including each user's e-mail address, the date he or she created 
unt, the date of the user's last login, and more. Figure 1 1-31 shows 
s — but actually the results table is wide enough to see all the 
columns. Suffice it to say that for every checked field name in Figure 1 1-30, 
there's a field containing data in the query results. 



Figure 11-31: 
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For purposes of future examples, I saved the query shown in Figure 1 1-30 as 
DetailedUsersitemsView, so in my own Database Explorer, that name has 
been added to the list of Views in the current database (as in Figure 1 1-32). To 
execute a view to see only the data it retrieves — without seeing its design — 
you can right-click the view name and choose Show Results. 



Figure 11-32: 
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The way the data looks in the view results is of zero importance. Formatting 
takes place when you display data from a view in a Web page. 
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In real life, there would rarely be any need to open a view from Database 
Explorer and see the records it returns, because the way the results are 

Database Explorer aren't especially pretty or easy to read. Instead 
— you'd use the view to extract data from your tables via data- 
bound controls in the Web pages you create. 



Each data-bound control can choose as much (or as little) information from 
the view as it needs. For example, one control could display a list of all users 
who purchased a specific item. Another could list all items purchased by a 
specific user. Still other controls could organize information from the view in 
other ways. 



Creating a Table of Pictures 

Not all database tables need to be linked to other tables. You can use a data- 
base table to store things that don't relate directly to specific users or spe- 
cific items. For example, if you have pictures you want to show or allow 
people to download, you can create a table of pictures. Then, as you'll see in 
Chapter 12, you can use Data controls to make it easy to display multiple pic- 
tures on a page. 

You don't need to put the pictures directly in the database. Rather, you can 
store all the pictures in a folder (or multiple folders). Then just create a table 
that identifies the picture's location within your site. As an example, Figure 1 1-33 
shows where I've created a subfolder named FlowerPix within my Images 
folder in Solution explorer. Each of the filenames, Flower02 , jpg, 
Flower02 . jpg, and so forth, is a photo of a flower. 



Figure 11-33: 

The 
FlowerPix 
folder 
contains ten 
pictures of 
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Next, you can create a table that contains three fields. One field will be a pri- 
mary key that just assigns each record a unique number. Even though this 
be on the "one" side of a one-to-many relationship, a table needs 
primary key if you want to be able to edit it through Web pages. So 
primary key to the table we're about to create. 



The second field will be a caption or title for each photo. The third field will 
be the path and filename of a photo. The path to each picture will look some- 
thing like this: 

~ / Image s / F 1 ower Pix / Fl owerxx . jpg 

where -/images/FlowerPix means "the FlowerPix folder in the Images 
folder, under the root (~) folder." The Flowerxx.jpg will be the name of a 
specific picture within that folder. I'll name the sample table Photos. You 
create it as you would any other table. Here are the steps: 

1. If you're in Solution Explorer, click the Database Explorer tab. 

2. Right-click on Tables under the database name and choose Add 
New Table. 

3. Type Photold as the first field name, and make it the smallint 
data type. 

If you think you'll have more than 32,000 pictures, use the int data type 
rather than smallint. 

4. Clear the check mark from the Allow Nulls field. 

5. In the Column Properties, click the + sign next to Identity Specification. 

6. Set the (is identity) property to Yes. 

You can leave the Identity Increment and Identity Seed each set to 1, so 
records are just numbered 1, 2, 3, 4, and so forth. 

7. Right-click the Photold field name and choose Set Primary key. 

Figure 1 1-34 shows how the table design should look so far. 
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8. Add a second field named PhotoCaption, and set its Data Type to var- 
char(50). 



a third field named PhotoURL and set its Data Type to var- 
(64). 



Figure 1 1-35 shows the final structure of the table. 



Figure 11-35: 

Completed 
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When defining a field that stores any kind of URL or address, use either 
varchar or nvarchar. Using char or nchar will pad short addresses 
with blank spaces, which in turn may prevent the link from working 
properly later when used on a page. 



10. Click the Close (X) button in the upper-right corner of the Design 
surface. 

11. Choose Yes when asked about saving your changes. 

12. Change the name of the table to Photos, then click OK. 

Now you have a new table, named Photos, in the database. Each record 
in the table can contain a photo caption and the link to a photo. If you 
already have your pictures in a folder, you can right-click the table and 
choose Show Table Data. 




Because PhotoiD is an automatically-numbered field, you want to leave it as 
Null when entering new records. Just type a caption name and a link to a pic- 
ture in the PhotoCaption and PhotoURL fields. Then type a caption and link 
for each photo. 



For my example, where each photo is a picture of a flower, I put a (fake) Latin 
name for each photo into the PhotoCaption field, and a link to each photo in 
the PhotoURL field. (I don't know the actual Latin names for the flowers, so I 
just made some up, borrowing a few names from animal anatomy.) Figure 
1 1-36 shows an example. I've opened Solution Explorer in that figure so you 
can see how the PhotoURL in each record refers to a specific image in the 
-/Images/FlowerPix folder. 
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Solution Explorer -r J? X 

| App_Data 
A App_Themes 
/ Images 
Ea b FlowerPix 

i £| Flower01.jpg 
J Flower02.jpg 
Flower03.jpg 
aJ Flower04.jpg 
i jj Flower05.jpg 
lJJ Flower06.jpg 
Jjj Flower07.jpg 
,aj Flower09.jpg 
jjj Flower09.jpg 
j^j Flowerl0.jpg 



The table doesn't look like much with just the text in it. However, keep in mind 
that a table is always just "raw data" and how things look in the table doesn't 
dictate how they'll look on a page. As you'll discover in Chapter 12, you can 
use a DataList control with the Photos table to show the actual pictures and 
captions on a page. For now it's sufficient to just close and save the table. 



Creating a Table of HyperLinks 

If your site has many links to Web sites outside your own site, you can store 
all those links in a database table. Doing so keeps all the links in one place, 
where they're easy to manage. You can then use whatever links you want on 
any page you want without having to worry about keeping links up-to-date 
across many different pages within your site. 

For a table of links, you'll need at least two text fields, one for the name or 
title of the site, and one for the site's URL (address). If you like, you could add 
a third field for storing a description of each site. Also, if you want to be able 
to edit the table's data through Web pages, the table will need a primary key. 

To keep things fairly simple, I'll show you how to create a table that contains 
a primary key, a field for storing each site's name, and a field for storing each 
site's address. The steps are: 

1. If you're in Solution Explorer, click the Database Explorer tab. 

2. Right-click on Tables under the database name and choose Add New 
Table. 

3. Type Siteld as the first field name, and set its Data Type to smallint. 

If you think you'll have more than 32,000 links, use the int data type 
rather than smallint. 
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4. Clear the check box for Allow Nulls. 

the Column Properties pane, click + next to Identity Specification, 
he (Is Identity) property to Yes. 



You can leave the Identity Increment and Identity Seed fields each set 
to one. 

7. Right-click the siteid field name and choose Set Primary Key. 

Figure 1 1-37 shows the table structure so far, with just the auto-num- 
bered primary key siteid defined. 



Figure 11-37: 

The primary 
key for a 
table of 
hyperlinks. 



Siteid 

J 



dbo.Table3: T...SPNETDB.MDF)* Start Page ▼ X 

Column Name Data Type | Allow Nulls 



Column Properties 



0 Full-text Specification 

E Identity Specification 
(Is Identity) 
Identity Increment 
Identity Seed 



□ 

n 



8. Add a second field to store the site's title. For my example, I'll name 
that field siteName and set its Data Type to nvarchar ( 50 ) . 

9. Add a third field for storing the site's URL. In my example, I'll name it 
siteURL and give it the varchar Data Type with a maximum length of 
64 characters. 



Figure 1 1-38 shows my completed table structure. 



Figure 11-38: 

Structure of 
my sample 
Links 
table. 



dbo.Table3: T...SPNETDFJ.MDF)* Start Page 


- X 


Column Name 


Data Type 


Allow Nulls 


V Siteid 


smallint 


□ 


] SiteName 


nvafchar(50) 


□ 


► | SiteURL 


varchar(64) 


□ 1 


J 


□ 



10. Click Close in the upper-right corner of the Design surface. 

11. When asked about saving the table, choose Yes. 

12. Name the table Links and click OK. 
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To add data to the table, right-click its name in Database Explorer and choose 
Show Table Data. When typing in data, remember to leave the siteid field 
11, as it will be numbered automatically after you've filled the other 
u can type any text for the site's name or title. But when specifying 
URL, make sure you use the full http ://... address. 



Figure 1 1-39 shows an example where I've put in some site titles and the links 
to those sites. The links don't actually do anything in the table. Remember, the 
table is just a means of storing the data. But as you'll discover in Chapter 12, 
you can use a DataList control to create a page that displays each site title 
as a link that takes the user directly to the site. 



Figure 11-39: 

Storing links 
in a table. 



Links: Query(...ASPNETDB.MDF) Start Page ■-■ X 




Siteld 


SiteName 


SiteURL 




1 


A5P.NET 


http://asp.net 




2 


Microsoft Developer Network 


http://msdn.microsoft.com 




3 


DotNetJunkies 


http://www.dotnetiunkies.com/ 




4 


.netECommerce 


http://www.dotnetecommerce.com/ 




5 


XHTML 2.0 Spec 


http://www.w3.org/MarkUp/ 




6 


CSS Home Page 


http : //www . w3 . org/Sty le/CSS/ 


► 


NULL 


WLL 


NULL\ 



Thus ends the world's quickest SQL Server/Database Design crash course. 
There is a great deal more to know about those topics. (But you knew that.) 
What you've discovered here should be enough to get you started. If nothing 
else, it has covered a lot of things many other VWD information resources 
will assume you already know. Chapter 12 shows many ways of putting the 
data to good use within the site. 
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Chapter 12 



In This Chapter 

Binding data to pages 

Using the Data Source Configuration Wizard 
Using the Gridview and DetailsView controls 
Using the DataList and Formview controls 



■ Visual Web Developer is a tool for building dynamic, data-driven Web 
sites — dynamic because the information you display on these Web 
pages doesn't have to be the same for everyone. You can get your site to 
create a page that's appropriate for every user, showing only the appropriate 
(user-specific) data from a database. 

Take a big search engine like Google for instance. When you submit a search 
string to Google, you're actually submitting a query to its database. What its 
database spits back are pages and pages of links to Web pages that contain 
the word or phrase you searched for. In other words, Google's Web site 
dynamically created the page you see using data from its database. 

To display data from your site's database in Web pages, you bind data from 
the database to controls on the page. While sitting on your server, the control 
is just a placeholder that contains no data. When a Web site visitor requests 
the page, the control can then be filled with whatever data is appropriate to 
that specific request. 

In other words, if 100 different people visit the page, each might see some- 
thing different, just as 100 different people doing different Google searches 
see 100 different lists of things in the page that Google sends them. What 
makes the page dynamic is that the page contains only data that is relevant to 
the user's request — and that changes from user to user. 



• •••••• 




This chapter explores how to use dynamic content in your own Web pages: 
how to bind the data to controls and how to place that data into your Web site. 
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ind data to all kinds of controls in Visual Web Developer. But before 
I get into specific controls, it's worth reviewing some things that apply to all 
data-bound controls. For openers, you always put data-bound controls on 
Web form (. aspx) pages. So the first step is to open or create, in Design view, 
the page on which you want to place the control. 



Next, you drag a data-bound control from the Toolbox onto the page (or, if 
the current page has a Master Page, you drag the control into the Content 
area of the page). The control won't look like much in Design view. It's just a 
placeholder; don't be alarmed by its ugly appearance. 

The control won't automatically be bound to anything specific in your data- 
base. You have to tell it what to bind to. For this you can use the Data 
Configuration Wizard 



Using the Data Configuration Wizard 

To bind a control to data, you use the Data Configuration Wizard. Typically, 
you launch that by opening the control's Common Tasks menu, clicking 
Choose Data Source, and then choosing New Data Source. Figure 12-1 shows 
an example: I've dragged a DataList control from the Toolbox onto a page, 
and am about to bind it to a data source. 



Figure 12-1: 

Preparing 
to bind a 
DataList 
control to a 
data source. 



Toolbox ▼ ? 
+ Standard 
- Data 

Pointer 
J GridView 



MemberPages/...atalogl.aspx* Start Page 



. DataList 



— i DelailsView 

—i FormView 
Repeater 
v J 5qlDataSource 
„^js AccessDataSource 
U|& ObjectDataSource 
- j XmlDataSource 
. r ;. SiteMapDataSo,,, 
+ Validation 
1 Navigation 




Content - Contentl (Custom) 
DataList - DataListI 



The IternTemplate is required. 



DataList Tasks 


Auto Format... 


Choose Data Source: 


(None) 0 


Property Builder... 
Edit Templates 


(None) 

<New data source,,, > . 






Specifying a data source and connection 

The first wizard page asks for the type of data source you want to get data 
from. Choose Database to get data from a SQL Server database. A name for 
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that source, usually SglDataSourcel, appears in the text box (as shown in 
Figure 12-2). 



Figure 12-2: 

Choosing 
SQL Server 
as the data 
source. 



i Configuration Wizard 



Choose a Data Source Type 



Where will the application get data from? 



14 Ut 14 H 

Access Database Object Site Map XML File 

Database 



Connect to any SQL database supported by ADO.NET, such as Microsoft SQL Server, 



Specify an ID for the data source: 



You don't need to change or worry about the name that appears in the text 
box, it will just be the control's name within the current page. You can click 
Next to move on. 

The next wizard page asks you to choose a connection. Typically, the connec- 
tion to your database has already been defined in your web . conf ig file, so 
you should always use that one. If that's the case, just choose that existing 
connection string from the drop-down list, as shown in Figure 12-3. 



Defining the connection string 



The first time you add a data control to a page, 
there may not be a name to choose from in the 
drop-down list. If that's the case, click New 
Connection. Then in the dialog box that opens, 
click Browse and navigate to the folder that 
contains the database file. For example, if you 
saved your site as MyWDSite in your 
My Documents folder, you'll need to open 
MyVWDSite in the My Documents folder, then 
the App_Data folder, and finally click on ASP- 
NETDB.MDF, and click Open. Then click OK. 



A second page will ask if you want to 
save the connection string in your Application 
Configuration file. Choose Yes, and give the con- 
nection string a name. For example, I named 
mine MyConnectionString. After you've defined 
a connection string, there's no need to create 
others. Each time you add a Data control to a 
page, you can use the same connection string. 
That's because the connection string just tells 
Visual Web Developer where the database 
(.mdf file) is located. It doesn't specify any par- 
ticular tables within that database. 
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Configure Data Source - SqlDataSourcel 
Choose Your Data Connection 



vhich data connection should your application use to connect to the database? 



Hy " 1 ". 1. 1 - cirinectionString ., 

j+j Connection string 



[ New Connection.. 



3 



Configuring the Select Statement 

The next wizard page, titled Configure the Select Statement (and shown in 
Figure 12-4), is where you tell the wizard exactly what you need from the 
database. Here you specify what you want the control to show on the page. 
There are two ways you can go about doing that: 



Figure 12-4: 

The 
Configure 
the Select 
Statement 
page. 



Configure Data Source - SqlDataSourcel 



Configure the Select Statement 



How would you like to retiieve data fiom your database? 

O Specify a custom SQL statement or stored procedure 
i*.' 1 Specify columns from a table or view 
Name; 

DetailedUsersItemsView | v| 

Columns: 



IB* 

□ Userld 

□ Email 

| | LoweredEmail 
Q CreateDate 

SELECT statement: 



□ LastLoginDate 
P] UserName 

□ LastActivityDate 

□ Transactionld 

□ Itemld 



□ Ourltemid 
f] ItemName 

□ ItemPrice 

□ TransactionDate 

□ IsPaid 



[ < Previous | 



Return only unigue rows 
WHERE... 



Specify a Custom SQL Statement or Stored Procedure. This is the 
option to choose if you're creating a complex query with multiple con- 
nected tables involved. It takes you to the Query Builder, where you can 
create the SQL statement using the same technique used at the end of 
Chapter 11 to construct views. If this approach looks a bit intimidating, 
don't worry; it's rarely (if ever) actually necessary. 

Specify Columns from a Table or View. This is the cushy (and more 
commonly used) option. You can easily grab what you want from wher- 
ever it is without going through the whole Query Builder rigmarole. 
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Choosing a table or tfiev) 

If jou choose Specify Columns from a Table or View, the next step is to tell 
d which table or view contains the data to bind to. You can bind to 
or view you created yourself. If you need data from the membership 
system, you can bind to any of the w_aspnet_ views in the Name drop- 
down list shown in Figure 12-5. 



Figure 12-5: 

Choose 
whichever 
table 
or view 
contains 
the data that 
the control 
needs. 



How would you like lo letrieve data fiom your database? 

O Specify a custom SQL statement or stored procedure 
■ Specify columns from a table or view 
Name: 

Detailsllsersltemsview 



DetailsUsersItemsView 

Items 

Transactions 

UsersAndltemsViewl 
>_aspnet_Applications 
'_aspnet_Mernbershipllsers 
>_aspnet_Profiles 

yw aspnet Rules 



4* 



sPaid 
temid 
)urttemli 
temNamt 
V ItpmPrirP 



Choosing columns to retriei/e 

After you choose a table or view, names of columns (fields) in that table or 
view appear below, each with a check box. That's where you specify which 
column (or columns) contain the data you need. To get all columns, choose 
the * check box. But if you don't need all the columns, then choose only 
those columns you do need. 

For example, let's say I chose items as the table to retrieve data from. I really 
don't need to be broadcasting my database's primary keys to the general 
public via the Internet, so I chose to include every column except i temid, as 
shown in Figure 12-6. 




While you're choosing options, you're actually creating the SQL statement 
that appears below the column names. 



To see what the SQL statement you've created so far will retrieve from the 
database, click Next, then click Test Query. The results of executing the SQL 
statement appear in a window. Using the options in Figure 12-6 as an exam- 
ple, the Test Query results display all the records from my items table, 
minus the itemid field, as shown in Figure 12-7. (Note that this is exactly the 
data needed to show a product catalog on a Web page.) 
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Figure 12-6: 

A request 
for all 
columns 
except 
Itemld 
from the 
Items 
table. 



Configure Data Source - SqlDataSource! 



isil 



Configure the Select Statement 



Jyou like to letiieve data fiom youi database? 

) Specify a custom SQL statement or stored procedure 
I Specify columns from a table or view 
Name: 

litems v) 
Columns: 



H* 

□ Itemld 
0 Ourltemld 
0 ItemName 
0 ItemDescription 



0 ItemPrice 



SELECT statement: 

SELECT [Ourltemld], [ItemName], [ItemDescription], [ItemPrice] FROM [Items] 



Figure 12-7: 

Results of 
testing the 
query from 
Figure 12-6. 



Configure Data Source - SqlDataSourcel 
Test Query 



SQL 



To preview the data returned by this data source, click Test Query, To complete this wizard, click Finish, 



Ourltemld ItemName 


ItemDescription 


ItemPrice 


iBWG-101 ! Introduction to Bird Watching 


Stop being a PC potatOj get out there in the real.., 


29.9500 


BWG-201 intermediate Bird Watching 


Once you've mastered the basics of watching bir, , , 


29,9500 


BWG-301 Advanced Bird Watching 


Renowned ornithologist Robin Oriole presents a f . . . 


39.9500 


RWG-101 introduction to Reptile Watching 


Sick of birds? How about the exciting sport or Re, , , 


29,9500 


RWG-401 Recovering from Reptile Wounds 


Reptiles can sting and bite. If you've discovered . . . 


49,9500 



SELECT statement: 

SELECT [Ourltemld], [ItemName], [ItemDescription], [ItemPrice] FROM [Items] ORDER BY [Ourltemld] 




As always, do not be concerned about how the data looks, or the arrange- 
ment of the columns at this stage. Here you're just saying what you want. 
You'll deal with how it looks on the page later. 



If the results you get from your query are not what you expected, no big deal. 
Just click the Previous button to return to the Configure the Select Statement 
page and work on the query some more. 
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If you need data from multiple related tables, and have already created a view 
that connects the tables, then you can choose that view as your source. For 
if you need information about transactions, you could choose one 
ws described at the end of Chapter 11, then specify which columns 
of information you need about each transaction, as shown in Figure 12-8. 



Choosing 
columns to 
display from 
a view. 



Configure Data Source - SqIDataSourcel 




ma 


Configure the Select Statement 

SQL 


How would you like to retiieve data from your database? 

O Specify a custom SQL statement or stored procedure 
0 Specify columns from a table or view 
Name; 

DetailedUsersIternsView |v] 
Columns: 


0 Return only unique rows 
WHERE... 


!□ * □ LastLoginDate 0 Ourltemid 
□ Userld 0 UserName 0 ItemName 

0 Email 0 LastActivityDate 0 ItemPrice 

1 | LoweredEmail 0 Transactionid 0 TransactionDate 


ORDER BY.,. 


□ CreateDate □ Itemld 0 IsPaid 


Advanced. . , 


SELECT statement: 




SELECT [Email], [UserName], [Transactionid], [Ourltemldl [ItemName], [ItemPrice], 
[TransactionDate! [IsPaid] FROM [DetailedUsersItemsView] 










| < Previous 1 1 Next > ] 


| Cancel | 



Testing that query reveals a set of records in which each record represents a 
transaction made to date. Each transaction would include the name and 
e-mail address of the user who made the purchase, as shown in Figure 12-9. 



Figure 12-9: 

Results of 
executing 
the query in 
Figure 12-8. 



Email 


UserName Transactionid Ourltemid ItemName 


ItemPrice TransactionDate IsPaid 


bob@evoed,com 


Bob 


20000 


BWG-201 


Intermediate Bird Watching 


29.9500 6/15/2006 


0 


bo blip eve ed.com 


Bob 


20001 


BWG-301 


Advanced Bird Watching 


39.9500 6/21/2006 


0 


bob@evoed.com 


Bob 


20002 


RWG-401 


Recovering from Reptile Wounds 


49.9500 6/25/2006 


0 


anna@coolnerds . com 
eksig.'EvoEd.Lum 


Newbie 


20003 


BWG-301 


Advanced Bird Watching 


39.9500 6/3/2006 


0 
0 


Eeks 


20004 


BWG-201 


Intermediate Bird Watching 


29.9500 [6/17/2006 


eb@EvoEd.com 


Eeks 


20005 


BWG-301 


Advanced Bird Watching 


39,9500 


6/21/2006 


0 


carol@evoed.com 


Carol 


20006 


BWG-301 


Advanced Bird Watching 


39.9500 


6/1/2006 


0 


carol@evoed,com 


Carol 


20007 


RWG-101 


Introduction to Reptile Watching 


29.9500 


6/2/2006 


0 


carol@evoed.com 


Carol 


20008 


RWG-401 


Recovering from Reptile Wounds 


49.9500 


6/20/2006 


0 


alice@evoed.com 


Alice 


20009 


BWG-301 


Advanced Bird Watching 


39.9500 7/1/2006 


0 


alice@evoed.com 


Alice 


20010 


RWG-101 


Introduction to Reptile Watching 


29.9500 7/21/2006 


0 


alice@evoed.com 


Alice 


20011 RWG-401 Recovering from Reptile Wounds 


49.9500 7/27/2006 


0 



Specifying a sort order 

By default, records your query retrieves will be listed in the same order 
they're arranged in the table. If you want a different sort order — say, 



Part III: Personalization and Databases 



DropBocM 



alphabetical by name, oldest to newest, or something like that — click 
the ORDER BY button. The Add ORDER BY Clause dialog box shown in 
10 opens. 



Figure 12-10: 

The Add 
ORDER BY 
Clause 
dialog box. 



Add ORDER BY Clause 



Specify the columns you would like to order by. 

Sort by 



© Ascending 
I Descending 



J3 



Descending 



Then by - 



SELECT statement: 



Ascending 
Descending 



SELECT DISTINCT [Email] FROM [DetailedUsersAndltemsView] ORDER BY 
[UserName] 



In this dialog box, you can choose how you want records in the query results 
sorted. For example, if the table or view contains a UserName field, you could 
choose UserName and Ascending to alphabetize rows by user name. If the 
table or view contains a TransactionDate, and you want to list rows from 
newest to oldest, choose TransactionDate as the Sort by column and 
Descending as the order. 

As always, you can choose multiple columns to create sorts within sorts. 
When you've finished choosing your sort column(s) and orders, click OK. 
The select statement you're creating gains an order by clause to order 
records by whatever columns you specified. 

Shouting only unique Values 

Sometimes you want to extract unique records from a table, so there is no 
duplication of information in the data returned. That's often the case when 
you want to use the query results as menu items in a drop-down list. 

For example, suppose you want to choose a user (to view their transactions) 
from a drop-down menu. The menu shouldn't contain all user's names, only 
users who have records in the Transactions table. 

A drop-down list usually only needs one or two columns, in this case they 
would most likely be UserName or Email, or both. In Figure 12-11, 1 opted to 
retrieve only the Email and UserName columns from the view. 
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© Specify columns from a table or view 
Name: 

■el: .si led Uiersltems View 



0 Email 

1 | LoweredEmail 

CreateDate 



f_J LastLoginDate 
0 UserName 

□ LastActivityDate 
| | Transact ion Id 

□ Itemld 



□ Ourltemld 
E ItemName 

□ ItemPrice 

| | Transact ion Date 

□ IsPaid 



0 Return only unique n 



SELECT statement: 

SELECT DISTINCT [UserName], [Email] FROM [DetailedUsersItemsView] ORDER BY [UserName] 



If it were not for the selected check box (Return Only Unique Rows) in 
Figure 12-11, the query in Figure 12-11 would return a row for every transac- 
tion to date, repeating the UserName each time, as shown in the left side of 
Figure 12-12. Some names are duplicated because any one user might have 
many transactions. Choosing Return Only Unique Rows eliminates duplicates 
from the returned rows, leaving only a list of unique names as shown in the 
right side of Figure 12-12. 



All rows 



Only unique rows 



Figure 12-12: 

Showing 
duplicate 
and then 
unique 
values. 



UserName 


Email 


Alice 


alice@evoed.com 


Alice 


alice@evoed.com 


Alice 


alice@evoed.com 


Newbie 


anna@coolnerds.com 


Bob 


bob@evoed.com 


Bob 


bob@evoed.com 


Bob 


bob@evoed.com 


Carol 


carol@evoed.com 


Carol 


carol@evoed.com 


Carol 


carol@evoed.com 


Eeks 


eks@EvoEd.com 


Eeks 


eks@EvoEd.com 



UserName 


Email 




Alice 


alice@evoed.com 




Bob 


bob@evoed.com 


Carol 


carol@evoed.com 


Eeks 


eks@EvoEd.com 


Newbie 


anna@coolnerds , com 



Retrieving specific routs (filtering) 

More often than not, you want to bind a data control to some of the records 
in a table or view but not to all those records. For example, you might want 
to extract records only for user Bob or Alice from the view to show that 
person what products they've purchased. Or, you might want to see a list of 
everyone who purchased a specific item rather than a list of every transac- 
tion ever made. 
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Limiting the records you retrieve from a table or view is called filtering the 
rows. To specify how you want rows filtered, click the WHERE button on the 

the Select Statement page. The Add WHERE Clause dialog box opens. 



The first step is to choose which column you want to filter on. For example, if 
you want to extract rows for a particular user only, choose userName or 
userid. If you want to retrieve rows for a specific item, choose Itemld. 

After you've chosen a column for the filter, choose an operator. All the usual 
suspects are available and summarized in Table 12-1. 



Table 12-1 


Operators Used in a SQL WHERE Clause 


Operator 


Meaning 






Equals 




< 


Less than 




> 


Greater than 




<= 


Less than ore 


qual to 


>= 


Greater than < 


)r equal to 


<> 


Does not equ; 


al 



After you've chosen the column name and operator, specify where the value 
to compare to will come from. You use the Source drop-down list for that. It 
offers several options, but you're most likely to use these two: 

i>* Control: Choose this if the value you want to compare to will come from 
some other control on the same page, such as a drop-down list. 

V Profile: Choose this if the criterion for selecting records has anything to 
do with choosing only records that are relevant to the specific user who 
is viewing the page. 

It's unlikely that you'd ever have to choose Cookie, Form, QueryString, or 
Session from the Source drop-down list. You should be able to do anything 
needed here if you use either the Control or Profile source. 

What happens next depends on what you chose in the steps leading up to 
this point. You'll see more information and examples shortly. But for the sake 
of example, let's say you chose UserName as the column to query, = as the 
operator, and Profile as the Source. The next step would be to specify the 
property name which, in this case, is UserName (same as the column name). 
Figure 12-13 shows an example in which only records that have the current 
user's name in the UserName column of the table will be extracted from the 
table. 
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Figure 12-13: 

Retrieve 
records for 
the current 
user only. 



Add one or more cond tun-; to the WHERE clause for the statement. For each condition you can specify 
) literal value or a parameterized value. Parameterized values get their values at runtime based on 



Parameter properties- 
Property name: 



Profile 



SQL Expression: 
[UserName] = @UserName2 

WHERE clause: 
5QL Expression 



User-Name 
Default value: 



Value: 

ProfileC'UserName") 





When you've specified your criterion, you must click the Add button to go 
on. (If you forget this step, the query won't work and you'll drive yourself 
nuts trying to figure out what's wrong.) When you click Add, your current 
selections are converted to SQL down at the bottom of the dialog box. The 



other controls are cleared so you can create additional criteria, if need be. If 
you don't need to add any more criteria, then click OK to return to the previ- 
ous wizard page. 

The select statement you're creating now contains a where clause that 
looks like this: 

WHERE ( [UserName] = ©UserName) 

That's SQL for "get records only for whichever user requested this page." 




It's important to understand that the where clause you create must refer to 
columns in the current query. The query shown here wouldn't work in the 
items table because there's no UserName column in the items table. But it 
works in DetailedUsersitemsView because that view does contain a 



UserName column. 

When you test a query that includes a where clause, you'll need to manually 
type in some plausible data to verify that the select statement works. This 
means click Next, and then click Test Query. You won't see query results 
immediately; instead, you see the Parameter Values Editor dialog box shown 
in Figure 12-14. 




A parameter is a chunk of information being passed to the SQL statement. For 
example, we can feed the where clause the parameter Bob. In return, the SQL 
statement spits back only records that have Bob in the UserName column. 
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Parameter Values Editor 



DropBo 



Figure 12-14: 

The 
Parameter 
Values 
Editor dialog 
box. 



For each parameter defined in the select statement, specify a type 
p value. 




1 



OK | Cancel 



To test the query, you must enter a realistic value into the Value box in the 
query editor. For example, I know for a fact that I have a user named Bob in 
my current membership system. So I could type that name into the Value box, 
(refer to Figure 12-14). 

After you enter a test value and click OK, the query executes. In this example, 
only rows that have Bob in the userName field are retrieved from the view, as 
shown in Figure 12-15. 



Figure 12-15: 

Only rows 
for user Bob 
are returned 
by the 

SELECT 

statement. 



Email 


UserName 


TransactionDate 


IsPaid 


Ourltemld 


Item Name 


ItemPrice 


bob@evoed.com 


Bob 


6/25/2006 




RWG-401 


Recovering from Reptile Wounds 


49.9500 


bob@evoed.com 


Bob 


6/21/2006 


0 


BWG-301 


Advanced Bird Watching 


39.9500 


bubiaievued.com 


Bob 


6/15/2006 


0 


BWG-201 


Intermediate Bird Watching 


29.9500 



The query results show every transaction made by user Bob. When you bind 
this to a data control on your page, however, the query won't show Bob's record 
on the page. It will show records for whatever user requested the page. 

Given those options you just discovered, you can retrieve anything you want 
from your database, no matter how large or small. When you've accurately 
defined the columns and rows that your data-bound control needs, click Next. 
You're taken to the Test Query page again. There you can click the Test Query 
button once to make sure your query is retrieving the data you need. Then click 
Finish when you're certain the query provides the data your control needs. 
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If you tested a query previously the results that show up on the Test Query 
page will be the ones left over from that previous text. To see what your cur- 
' ^^t^^^ y produces, you must click the Test Query button. 

Clicking Finish closes the wizard and brings you back to the Design view of 
the page. The data-bound control will probably look completely different 
(though still random and ugly because it's only a placeholder for data to be 
provided later). 



Data controls in Design View 

In Design view, data controls don't look like much. The control shows column 
names from the underlying table or view. For example, Figure 12-16 shows a 
DataList control after binding it to the items table (without the Itemld 
column). Instead of showing actual data from the table, the control just 
shows placeholders like abc for text and 0 . l for numbers. 



Figure 12-16: 

A 

DataList 

control after 
binding to 
columns 
from the 
Items 
table. 



MemberPages/5QLStuff.aspn* 



31 DataList Tasks 

Auto Format... 



Ourltemld: abc 
ItemName: abc 
ItemDescnpuon: abc Choose Data So urce: [SgJI 
[tetnPnce: 0 Configure Data Source... 

Refresh Schema 
Ourltemld: abc i Property Builder... 
ItemName: abc Ec ft Templates 
ItemDescription: abcr 
ItemPrice: 0 1 

Ourltemld: abc 
ItemName: abc 
ItemDescription: abc 
ItemPrice: 0.2 



To see what the data-bound control will display to people accessing your 
Web site normally, view the page in a Web browser. The placeholder text is 
replaced with actual text from the table, as shown in Figure 12-17. (There's 
more text than can be seen without scrolling. But trust me, the page shows 
all records from the items table.) 

Keep in mind that Figure 12-17 is only an example. There are many data con- 
trols to choose from, and an infinite number of ways you can display data on 
a page. But the general procedure of going through the Data Configuration 
Wizard is the same, regardless of what data control you use or how you 
format your data. 
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i ' Untitled Paiie Microsoft Internet Explorer 

File Edit View Favorites Tools Help 

*; 2'; ', , Search Favorites £) • ..^ j] - ^ ^ 

;t::EiiK/MvV:'^5it:-/M:-riiberF'Lqe:/5QLStuff.aspx 



Figure 12-17: 

The 
page from 
Figure 12-6 
as seen 
in a Web 
browser. 







3H« 



Ourltemld: BWG-101 

ItemName: Introduction to Bird Watching 

ItemDescription: Stop being a PC potato, get out there in the real world, and see some actual non-human living 
organisms in the natural habitats. The fresh air and sunshine will do you good. In this course you'll learn all about the 
exciting hobby of bird watching. This is just sample text, this is not an actual course. 
ItemPrice; 29.9500 

Ourltemld; BWG-201 

ItemName: Intermediate Bird Watching 

ItemDescription: Once you've mastered the basics of watching birds, you're ready to start learning about some of the 
advanced equipment you can use to improve your watching time, In this course you'll learn about binoculars, telescopes, 
cameras, and whatever else someone might use in bird watching. Again, this is just fake sample text used for demo 



Ourltemld: BWG-301 

ItemName: Advanced Bird Watching 

ItemDescription: Renowned ornithologist Robin Oriole presents a fascinating journey into the names of all the birds you 
might see out there, Of course, this is atotally bogus course so the rest of this text is just for demo purposes. In real like 
this would be more information about the item. 
ItemPrice: 39.9500 

Ourltemld: RWG-101 

ItemName: Introduction to Reptile Watching 

ItemDescription: Sick of birds? How about the exciting sport or Reptile Watching? You know, reptiles and birds are both 
close cousins of the dinosaurs. But since this is not a real course I won't go into all of there here, Just pretend that this 
is an actual description of an actual item in the Items table. 

ItemPrice: 29.9500 M 



Vj Local intranet 



If you ever change your mind about the columns and rows you chose for a 
data-bound control, it's no big deal. Just click the control's Common Tasks 
menu and choose Configure Data Source. Click Next on the first wizard page, 
and you'll be taken back to the Configure SQL Statement page, where you can 
change which columns are retrieved, the sort order, the WHERE clause, or 
any combination of those. 



Formatting bates and Numbers 

Unless you specify otherwise, data from SQL Server tables look on a page as 
they do in a table, which means money fields display in the format 29.9500 
and date/times appear in the format 6/15/2006 12:00:00 am. Of course, 
you're not stuck with those formats. 

Exactly how you change the format of a date or number varies from one data 
control to the next. (You'll see examples in upcoming sections.) But the sym- 
bols you use to format dates and times are always the same. 

The full set of things you can do, formatting-wise, are all documented in the 
.NET Framework and C# documentation under the general moniker of composite 
formatting. The ones you're most likely to actually use in a Web site are sum- 
marized in Table 12-2. The first one, { 0 : c } or { 0 : c } , works with any field 
that's the money or smallmoney data type. The others work with fields of the 
datetime and smalldatetime data type. 
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Table 12-2 

N I X f\ 


Formatting Symbols for Currency 
and Date/Time Columns 




Name 


Sample Output 


{0:C}or{0:c} 


Currency 


$29.95 


{0:d} 


Short date 


6/1/2006 


{0:D} 


Long date 


Thursday, June 01, 2006 


{0:t} 


Short time 


12:00 AM 


{0:T} 


Long time 


12:00:00 AM 


{0:f} 


Full (short time) 


Friday, June 02, 2006 12:00 AM 


{0:F} 


Full (long time) 


Thursday, June 01, 2006 12:00:00 AM 


{0:g} 


General (short time) 


6/1/2006 12:00 AM 




{0:G} 


General (long time) 


6/1/2006 12:00:00 AM 





Some Security Considerations 

In any given database, there is sure to be information that users should never 
see. There will also be much information that users are allowed to see but 
not change. It's up to you to decide which is which — and to provide all the 
necessary security. 

A relatively simple way to deal with this is to create a new folder for pages 
that no user (other than you) can see. Here's how: 

1. Right-click the site name at the top of Solution Explorer. 

2. Choose New Folder. 

3. Name this folder AdminPages. 

4. Using the Web Site Administration Tool, create a new role, perhaps 
named Admin. 

5. Add a new access rule that allows people in the Admin role to access 
pages in AdminPages, and denies access to both anonymous users and 
site members. 

6. Finally, create a new user account for yourself and put yourself in 
both the Admin and siteMembers roles. 



You'll need to log in to that new user account before you can view any 
pages you put into the new AdminPages folder. 



Part III: Personalization and Databases 



If you don't have the slightest idea what I'm talking about here, see Chapter 3. 



Pu oKs 

Usmq the GridVieu) Control 



As its name implies, the Gridview control shows data from a table or view in 
a grid consisting of rows and columns. As always, you can specify exactly 
which columns and rows (and from which tables or views) in your database 
the grid should show. The Gridview can be used both to display data, as well 
as to add, change, and delete data in a table. 

If your intent is to show data to users in the Gridview control, then you can 
bind the Gridview to any table or view in your database. If you want to use 
the Gridview to edit data in the table, then you cannot bind the control to a 
view. (Data from views can never be edited by the user.) Furthermore, the 
Gridview must be bound to one table only, and that table must contain a pri- 
mary key field. 



An instant GridVieu) control 

If you want to use a Gridview control to show all columns and rows from a 
single table in your database, your job is easy. Here's what you should do: 

1. In Database Explorer, click the + sign (if necessary) to expand the 
tables list. 

2. Drag the name of a table that you created (not one of the aspnet_ 
tables) onto the page. 

For example, Figure 12-18 shows the results of dragging a table named items 
into the content area of a page that has a Master Page. 



AdminPages/Vi...ir_Ir.ems.aspx* 



Figure 12-18: 

Drag a table 
to a page 
to create 
an instant 

Gridview. 



Content - ContEntl (Custom) 



Itemld Ourltemid ItemName IteniDescription ItemPrice 

0 
1 
2 
3 



SqIDataSource - SqIDataSourcel 



abc 


abc 


abc 


0 


abc 


abc 


abc 


0.1 


abc 


abc 


abc 


0.2 


abc 


abc 


abc 


0.3 


abc 


abc 


abc 


0.4 



Drag 



Database Explorer 



Database Diagrams * 
Tables 

_1 aspnet_Applications 

_J aspnet_Membership 

_J aspnet_Paths 

_jj aspnet_PersonalizationA 

_j aspnet_PersonalizationP 

_J aspnet_Profile 

9 aspnet_Roles 

_Ll aspnet_5chemaVersions 

_[| aspnet_Users 

__j aspnetJJsersInRoles 

_l aspnet_WebEvent_Ever 

9 Items 

9 Transactions 

Views 

-.^-.-.-■H : in--?ij..h:s 
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DropBootS 

I 1. In th 



If you want to show something in a Gridview other than the contents of a 
single table, you can create a Gridview control and bind it to appropriate 
g the Data Configuration Wizard. Here are the steps: 



the Toolbox, expand the Data category of controls. 

2. Drag a Gridview control from the Toolbox onto your page. 

3. From the GridView's Common Tasks menu, select Choose Data 

SourceO<New data source>. 

4. Use the Data Source Configuration Wizard to specify which data you 
want the control to show. 

When you complete the wizard and click Finish, the Gridview control 
shows a column heading for each column you specified in the Data 
Source Configuration Wizard. 

In a Web browser, the data will look something like Figure 12-19 (assuming 
you don't do any formatting). The control actually shows all records from the 
table. The figure only shows a few records. 



Logout 



Itemld Ourltemld Item Name 



Figure 12-19: 

The page 
from 
Figure 12-18 
in a Web 
browser. 



10001 BWG-101 



10002 BWG-201 



10003 BWG-301 



Introduction to 
Bird Watching 



Intermediate 
Bird Watching 



Advanced Bird 
Watching 



Introduction to 
10004 RWG-101 Reptile 

Watching 



ItemDescription 

Stop being a PC potato, get out there in the real world, 
and see some actual non-human living organisms in the 
natural habitats. The fresh air and sunshine will do you 
good, In this course you'll learn all about the exciting 
hobby of bird watching. This is just sample text, this is 
not an actual course. 

Once you've mastered the basics of watching birds, 
you're ready to start learning about some of the 
advanced equipment you can use to improve your 
watching time. In this course you'll learn about 
binoculars, telescopes, cameras, and whatever else 
someone might use in bird watching, Again, this is just 
fake sample text used for demo purposes. 
Renowned ornithologist Robin Oriole presents a 
fascinating journey into the names of all the birds you 
might see out there. Of course, this is a totally bogus 
course so the rest of this text is just for demo purposes. 
In real like this would be more information about the 
item. 

Sick of birds? How about the exciting sport or Reptile 
Watching? You know, reptiles and birds are both close 
cousins of the dinosaurs. But since this is not a real 
course I won't go into all of there here, Just pretend that 
this is an actual description of an actual item in the 
Items table. 



I tern Price 



29.9500 



39,9500 
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DropBoqk 



Formatting the GridVieu/ control 



ult appearance of a Gridview control isn't necessarily pretty. But 
; lots of options for making it look and act the way you want. Most of 
these options are available from the control's Common Tasks menu shown in 
Figure 12-20. 



Figure 12-20: 

Common 
Tasks menu 
for a 
GridView 
control. 



V— ' , , „ I „, I " ; . ; ., ."^ GridView Tasks 

Itemld Ourltemid ItemName ItemDescnptjonltemPnce 



Content - ContBntl (Custom) 



abc 


abc 


abc 


0 


abc 


abc 


abc 


0.1 


abc 


abc 


abc 


0.2 


abc 


abc 


abc 


0.3 


abc 


abc 


abc 


0.4 



%qlDataSource - SqiDataSourcel 



Choose Data Source : SqIDataSource 1 



Configure Data Source. . . 
Refresh Schema 



Edit Columns... 
Add New Column.. 



O Enable Paging 
O Enable Sorting 
O Enable Editing 
O Enable Deleting 
O Enable Selection 



Edit Templates 




The gray SQLConnection box is just a placeholder that defines the control's 
data source, and won't show up on your Web page. You can show or hide 
those gray boxes by choosing ViewONon Visual Controls from VWD's menu. 

As with most controls, the Common Tasks menu for the Gridview has an 
Auto Format option that you can choose to apply a predefined formatting 
style to the control. Other major items on the menu are as follows: 



^\NG 




Enable Paging: Adds a navigation bar to the bottom of the Gridview, 
allowing users to page through multiple records. Useful for displaying 
data from larger tables to prevent all records from showing up on a 
single page. 

0 Enable Sorting: Converts each column title to a clickable link. In the 
browser, users can click any column heading to sort the rows by that 
column. 

0 Enable Editing: Allows users to change any value in any row or column. 
This option is only available if the control is bound to a single table that 
has a primary key. 

0 Enable Deleting: Allows users to delete records. This option is only 
available if the control is bound to a single table that has a primary key. 

If you enable editing or deleting, that means anybody who views the 
page can change or delete records in the table. If you don't want users to 
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do that, be sure to put the page that contains the control into a folder 



that users can't access. 



ipBoote 



!ble Selection: Allows users to select a record. That record, in turn, 
be used as a filter for other data controls on the same page. You'll 
see an example in the section titled "Creating Master-Details Forms." 



Formatting GridVievt) dates and times 

If your Gridview control shows currency or date/times, you use the Edit 
Items option on the Common Tasks menu to format those columns. After you 
choose Edit Items, you'll be taken to a dialog box titled Fields. Under Selected 
Fields in that dialog box, click the name of the field to which you want to 
apply a format. The Properties box for the BoundField control then shows 
properties for that selected field. 

Scroll down through the properties until you get to the DataFormatString 
property and then enter your formatting code. Figure 12-21 shows an example 
in which I've applied the { 0 : c } formatting code to the ItemPrice control. 



Fields 



SB 



Figure 12-21: 

Fields dialog 
box for a 
Gridview 
control. 



Available fields: 
_ (All Fields) 
□U BoundField 
^] Itemid 
J] Ourltemld 
;3 ItemName 
_^ ItemDescription 
[|] ItemPrice 



Selected fields: 
©j'CommandField 
D Itemid 
J] Ourltemld 
j] ItemName 
J] ItemDescription 
jD ItemPrice 



Q Auto-generate fields 



E 



BoundField properties: 

.SSiLU 



B Data 




DataField 




ItemPrice 




DataFormatStrinc 


{0:c} 




B Styles 








0 Control5tyle 








E Footer5tyle 








EE HeaderStyle 








B ItemStyle 








BackColor 




□ 




BorderColor 




□ 




BorderStyle 




NotSet 


V 


DataFormatString 




The formatting that is applied to the bound value. 
For example, "{0:d)-" or "-{Q:c}-". 



'.nrr/eir. Irh::.- fidj into a TemplateField 



F-'>?fie;h vhema 



To right-align or center text within a column, scroll down a bit further in the 
Properties sheet and expand the ItemStyle category. Then set the 

HorizontalAlign property to Right or Center. 

Arranging and hiding columns 

To arrange or hide columns in a Gridview, use the arrow and Delete buttons 
just to the right of the Selected Fields list. For example, to move a column to 
the left within the Gridview, click its name, then click the Up button. 

To hide a column from Gridview display, click its name and click the black X 
button to the right of the Selected Fields list. 
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If your Gridview supports editing, deleting, or selecting, the Selected Fields 
list will include an item named CommandField. That item represents the left- 
^y|^^4 unin in the table where Edit . Delete , and Select links are placed. 

If you don't want a particular column to show up in the Gridview, just 
remove its name from the list of Selected Fields. For example, I could remove 
the itemid field from the current Gridview control by clicking itemid in the 
Selected Fields list and then clicking the black X button just to the right of 
the list. 

When you've finished formatting fields in the Fields dialog box, click OK to 
save your changes and return to the page. To get an accurate picture of how 
your selections will play out, be sure to view the page in a Web browser. 

Styling the Whole GridVieut 

You can style the Gridview, as a whole, much as you would any other item. 
Right-click the control, choose Style, and use the Style Builder to define 
the style. 

You can also style the control via its Properties sheet. The Properties sheet 
for Gridview provides extremely fine-grained control over the exact appear- 
ance and behavior of every Gridview nook and cranny. For example, if 
you've enabled Paging in your control and want to set the number of rows 
that appear on each page, change the PageSize property under Paging to 
however many records you want each page to show. 

If you want to apply a consistent look and feel to Gridview controls used 
throughout your site, consider creating a CSS class. For example, you could 
create a CSS style rule named GView that looks like this: 

.GView 
{ 

border-right: #191970 thin solid; 
border-top: #191970 thin solid; 
font-size: smaller; 
border-left: #191970 thin solid; 
color: #483d8b; 

border-bottom: #191970 thin solid; 
border-collapse: collapse; 
background-color: #f0f8ff; 

} 



Binding to OropOou/nList Controls 

Even though a DropDownList control isn't a data control, per se, you can 
bind data from a database to that control. This is especially useful when the 
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DropBocS 



drop-down list needs to show current data from the database — for example, 
all users, all items in an items table, or all users who have made purchases. 

;r you choose from the drop-down list can then be used as a filter for 
f?ft>g rows to display in a nearby data-bound control. 



For example, suppose you want to create a page in which you can choose any 
user in your database and see his or her transactions and profile properties 
(or whatever) only. Your first move is to create some means of choosing one 
user. A drop-down list might work nicely for that. 

To create a drop-down list that shows current database data, follow these steps: 

1. Create or open the . aspx page on which you want to place the control. 

2. From the Standard category in the Toolbox, drag a DropDownList con- 
trol onto the page. 

By default, the control is named DataListl (assuming it's the first 
DropDownList control you added to the page). It's important to know 
the name of the control because to use the control's value for anything 
useful later, you must refer to it by exactly that name. 

3. On the DataList control's Common Tasks menu, select Enable Postback. 

The above step is important if you intend to use the drop-down list as a 
means of filtering rows in a table. 

4. From the Common Tasks menu, select Choose Data Source. 

5. On the wizard page that opens, choose New Data Source. 

6. On the first wizard page, choose New Data Source from the 
drop-down list. 

7. Go through the usual steps in the first wizard pages (that is, choose 
Database, click OK, choose your usual connection string, and click Next). 

At this point, you're in the Configure SQL Statement page. 

8. Choose the table or view that contains the columns you want to show 
in the drop-down menu. 

For example, if you want the drop-down menu to show an alphabetical list 
of all current users, you could choose vw_aspnet_MembershipUsers. 

9. Choose the column (or columns) you want to use for the 
drop-down menu. 

For example, choose userName to make the drop-down list show a list of 
user names. 

10. Use the ORDER BY button to sort the items into alphabetical order. 

When you've finished, you can click Next (as necessary) and then Finish 
to work your way back to the control. 
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To test the drop-down list, you have to view the page in a Web browser. Using 
the example in which I opted to show the userName and Email columns from 
spnet_MembershipUsers view, my drop-down list looks like the one 
Figure 12-22. 



Figure 12-22: 
A Drop 
DownList 

control 
showing 
data 
from vw_ 
aspnet 
Membership 
Users. 



Alice 

Alice 

Bob 

Carol 

Eeks 

Honcho 

Newbie 

TestMember 

Testy 



Using a bropboWnList to fitter records 

To use a DropDownList control to filter records in another data-bound con- 
trol (such as a Gridview), several steps are required. I'll use a Gridview con- 
trol to explain the basic process, but the same idea works with other Data 
controls described later. 

The first step is to add the control to the page and bind it to the values you 
want the control to show. For example, suppose that after you choose a user 
name from the drop-down list, you want to see all the transactions that user 
has made. You could get that result by dragging a Gridview control to the 
same page as the DropDownList control and using the drop-down list control 
to filter the records it displays. 

Any time you add a second Data control to a page, you want to be sure to 
choose <New Data Source . . . >, and not try to use the same data source 
that the first control uses. That's because the data source defines the exact 
rows and columns that the control will show. And the rows and columns the 
second control shows will be different from what the first control shows. By 
default, the new data source is named SqlDateSrc2. 

When you choose a connection string, you want to reuse the same connec- 
tion string you use for everything else. That's because the connection string 
only tells the control where the database is located — it doesn't specify any 
tables or views within the database. 

When you're choosing a table, view, or column, choose one that has the same 
column as the DropDownList control; UserName, in this example. That's 
because rows to be retrieved need to be filtered by values in that column name. 
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sort order 



The DetailedUsersItemsView view (described in Chapter 11) contains lots 
of information about transactions, and includes a userName field, so you 

pose that as the view. Then, just choose the columns you want the 
control to show, as shown in Figure 12-23. You can also choose a 
sort order using the ORDER BY button. 



Figure 12-23: 

Columns to 
show in the 
Gridview 
control 
selected. 



I Specify columns From a table or view 
Name: 

DetailedUsersItemsView 
Columns; 

[ET 1 



- 



□ LastLoginDate 
0 UserName 

□ LastActivityDate 
0 Transaction^ 

□ Itemld 



0 Ourltemld 
0 ItemName 
0 ItemPrice 
0 TransactionDate 
0 IsPaid 



0 Return only unique rows 
WHERE... 



□ Userld 

0 Email 

1 | LoweredEmail 

□ CreateDate 

SELECT statement: 

SELECT [TransactionDate], [Ourltemld], [ItemPrice], [IsPaid], [Email], [UserName], [Transactionld] 
FROM [DetailedUsersItemsView] 



The critical step in the filtering process is limiting records to those that 
match the name in the DropDownList. Click the WHERE button to get started 
on that. Then set your options as follows: 

Column: The name of the column that contains the value needed for fil- 
tering; userName in this example. 

Operator: This is typically the = operator, but it can be any available 
operator. 

Source: Where the value to be searched for comes from. In this example, 
that would be Control because the value to look for is in a DataList 
control. 

Control ID: The name of the control that contains the value to look for; 
DropDownListl in this example. 

So in this example, the selections would look like Figure 12-24. Those selec- 
tions are just a graphical way of saying "Retrieve only rows in which the 
UserName column's value equals the value of the control named 

DropDownListl." 

You must remember to click Add, at which point the selections get translated 
into SQL. Click OK, click Next, and then click Finish to work your way back to 
the page. 

To test the page, view it in the browser. Initially you'll see just the DropDownList 
control. To view any user's transactions, select that user's name from the drop- 
down list. The Gridview control "re-filters" each time you make a selection, so 
you can check out different users. Figure 12-25 shows an example in which Carol 
is selected in the DropDownList control, so only her transactions are visible in 
the Gridview control below the DropDownList control. 



Part III: Personalization and Databases 



Add WHERE Clause 




Figure 12-24: 

Retrieving 
only the 
records that 
match the 
UserName 
in Drop 
DownListl. 



Add one or more cond tions to the WHERE clause for the statement. For each condition you can specify 
) literal value or a parameterized value. Parameterized values get their values at runtime based on 



Parameter properties 
Control ID: 



Control 



SQL Expression: 
[UserName] = ©UserName 

WHERE clause: 
5QL Expression 



DropDownListl 



Default value: 



Value: 

DropDownUst 1 . SelectedValue 




Figure 12-25: 
GridView 

control, 
showing 
only the 
records for 
selected 
user Carol. 



Select a User: | Carol 






Transactions by selected user: 






TrunsactionDate Ourltemld ItemPrice IsPaid 


Email 


UserName 1 


6/1/2006 BWG-301 $39.95 


carol@euoed.com 


Carol 


6/2/2006 RWG-101 $29.95 - 


carol@evoed.com 


Carol 


6/20/2006 RWG-401 $49.95 - 


carol@evoed.com 


Carol 



In Figure 12-25, 1 gussied up the Gridview control a bit, using techniques 
described in the preceding section. I also typed some text directly onto the 
page to clarify what's going on. 



Viewing and editing user properties 

If you added profile properties to your site, sometimes you want to see and 
edit the properties of your user profiles. The tricky part is that you can't use 
the normal syntax such as Prof lie. proper tyName to refer to a specific 
user's properties. That's because that standard syntax always refers to who- 
ever is viewing this page. When you're viewing the page, that's always going 
to be you (well, yeah), so you'd see only your own profile properties. 
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To see the properties of some other user, use the following syntax instead: 

e . GetProf ile ( UserName) . proper tyName 



userName is the name of the user for which you want to view a profile, 
and propertyName is the name of the property. If the UserName value is 
stored in a control, like DropDownListl, then UserName is actually the value 
of that control, as given here: 

Profile . GetProf ile (DropDownListl . SelectedValue) .propertyName 

So, if the name Bob is currently selected in the control named DropDownListl, 
then Prof ile .GetProf ile (DropDownListl . SelectedValue) . FirstName 
refers to user Bob's LastName property. 

Given that, you could add a table to the page that contains a Textbox control 
for each profile property you want to display. For example, Figure 12-26 
shows some Textbox controls, and their names, in a page with a drop-down 
list control on it. I've also pointed out the names of the drop-down list control 
(DropDownListl) and the button (Buttonl), as those names are important 
programmatically 



Figure 12-26: 
Textbox 

controls that 
can be used 
to show 
profile 
properties. 



Select aUser: Databound j v; 



SqIDataSource • SqIDataSourcel 



Selected User's Profile 

First Name: 
Last Name: 
Address 1: 
Address 2: 
City: 

State/Province: 
ZIP/Postal Code: 
Country: 
Preferred Theme: 



Properties 





Submit Changes 



txtFirstName 
txtLastName 
txtAddressI 
txtAddress2 
-txtCity 
-txtStateProv 
txtZIPpostal 
-txtPrefTheme 
Buttonl 



Each time you choose a name from the drop-down list, the Textbox controls 
need to be populated with properties from the currently-selected user, which 
means they have to be updated every time the value in the drop-down list 
changes. To make that happen, double-click the drop-down list control to get 
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to its SelectedindexChanged event handler. Then type in the necessary code 
to populate each Textbox control. So the whole C# procedure looks like this: 



te Textbox controls with selected user's profile properties. 
Fed void DropDownListl_SelectedIndexChanged( object sender, EventArgs e) 



txtFirstName.Text = Profile. GetProfile (DropDownListl.SelectedValue) .FirstName; 
txtLastName . Text = Profile. GetProfile (DropDownListl.SelectedValue) .LastName; 
txtAddressl.Text = Profile. GetProfile (DropDownListl.SelectedValue) .Addressl; 
txtAddress2 .Text = Profile. GetProfile (DropDownListl . SelectedValue) .Address2; 



txtCity.Text = Profile. GetProfile (DropDownListl. SelectedValue) .City; 
txtStateProv.Text = 

Prof ile. GetProfile (DropDownListl . SelectedValue) . StateProvince; 
txtZIPpostal.Text = 

Prof ile. GetProfile (DropDownListl . SelectedValue) . ZIPPostalCode; 
txtCountry.Text = Prof ile. GetProfile (DropDownListl. SelectedValue) .Country; 
txtPref Theme. Text = 

Profile . GetProfile (DropDownListl . SelectedValue) . Pref erredTheme ; 



To allow editing you'd need to include a button like the Submit button in the 
EditProf ile . aspx page from Chapter 9. But, again, replace Profile . with 
Profile. GetProfile (DropDownListl . SelectedValue) . as shown here: 



/ /Replace 
protected 
{ 

Profile. 
Profile. 
Profile. 
Profile. 
Profile. 
Profile. 

Profile. 

Profile. 
Profile. 



current user's profile properties with contents of Textbox controls, 
void Buttonl_Click( object sender, EventArgs e) 



GetProfile (DropDownListl 
GetProfile (DropDownListl 
Ge t Pr o f i 1 e ( Dr opDownLi s t 1 
Ge t Pr o f i 1 e ( Dr opDownLi s t 1 
Ge t Pr o f i 1 e ( Dr opDownLi s t 1 
Get Pro f i 1 e ( Dr opDownLi s t 1 

txtStateProv . Text ; 
GetProfile (DropDownListl 

txtZIPpostal.Text; 
GetProfile (DropDownListl 
Get Pro f i 1 e ( Dr opDownLi s t 1 

txtPref Theme . Text ; 



SelectedValue) 
SelectedValue) 
SelectedValue) 
SelectedValue) 
SelectedValue) 
SelectedValue) 



FirstName = txtFirstName.Text; 
LastName = txtLastName. Text; 
Addressl = txtAddressl.Text; 
Address2 = txtAddress2 .Text; 
City = txtCity.Text; 
StateProvince = 



SelectedValue) .ZIPPostalCode = 



SelectedValue) 
SelectedValue) 



Country = txtCountry.Text; 
Pref erredTheme = 



Assuming you add that to the previous page example, when you choose a 
user from the drop-down menu, that page shows all profile properties for that 
user as well as all of that user's transactions, as shown in Figure 12-27. 
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Figure 12-27: 

Page shows 
profile 
properties 
and 

transactions 
for selected 
user. 



Select a User: Bob 



ser's Profile Properties: 

st Name: 



Last Name: 
Address 1: 
Address 2: 

City: 

State/Province: 
ZIP/ Postal Code: 
Country: 
Preferred Theme: 



Wingnut 



Nerdy 



Submit Changes 



Transactions by selected user: 



Trans action Date Ourltemld ItemPrice IsPaid Email UserName 



6/15/2006 BWG-201 $29.95 

6/21/2006 BWG-301 $39.95 

6/25/2006 RWG-401 $49.95 



bob@evoed.com Bob 
bob@evoed.com Bob 
bob@evoed.com Bob 



Usinq the DetaiisVieu) Control 

The Detailsview control in the Toolkit's Data category is similar to the 
GridView in that you can use it to show data as well as to edit and delete 
data. The main difference is that the Gridview is designed to show multiple 
rows and columns in a tabular format, and Detailsview is designed for 
working with one record at a time. 




For readers who are familiar with Microsoft Access, a Gridview is like a 
datasheet and a Detailsview control is more like a form. The Formview con- 
trol is an older ASP.NET 1 control that isn't quite as easy to use as the new 
ASP.NET 2.0 Detailsview control. 



Binding a betaitsVieut control 

The Detailsview control allows you to add, edit, and delete records in a table. 
However, it can only do so if it's bound to a single table that has a primary key. 
If you bind a Detailsview control to a view or to multiple tables, you can still 
see data in the control, but you can't edit data in the underlying table(s). 
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Even if you do bind a Detailsview control to a single table that has a pri- 
mary key, you still won't be able to use it to edit data in the underlying table 
>u take some extra steps during the binding process. From start to 
2 steps would be: 

1. Drag a Detailsview control from the Data category of the Toolbox 
onto the page. 

2. On its Common Tasks menu, click Choose Data Source and choose 
<New Data Source.. .>. The Data Source Configuration Wizard opens. 

3. The next steps are the same as always: Choose Database, click OK, use 
the same connection string you always use, and click Next. 

4. If you want to use Detailsview to add/edit/delete table records, 
choose a table that has a primary key. 

I'll use my sample items table to illustrate. 

5. Click * to choose All Columns (if you intend to use the control to 
enter/edit/delete records). 

Optionally you can use the WHERE and ORDER BY buttons in the usual 
manner to limit records the control retrieves to set a sort order. 

6. If you want to be able to add/edit/delete records, click the Advanced 
button. 

7. In the dialog box that opens, choose both options, as shown in 
Figure 12-28. 



DropBocM 



Figure 12-28: 

Choose both 
options if 
you want 
to use 
Details 
View to 
modify data. 



Advanced SQL Generation Options 



Additional INSERT, UPDATE, and DELETE statements can be generated to 
update the data source. 

0 Generate INSERT, UPDATE, and DELETE statements 

Generates INSERT, UPDATE, and DELETE statements based on your 
SELECT statement. You must have a primary key field selected for this 
option to be enabled. 

0 Use optimistic concurrency 

Modifies UPDATE and DELETE statements to detect whether the database 
has changed since the record was loaded into the DataSet. This helps 
prevent concurrency conflicts. 




That scary "optimistic concurrency" thing is just a means of dealing with 
situations in which two people edit a record at the same time. Choosing 
that option is a good thing because it basically says to the app "You deal 
with that headache, so I don't have to." 



8. Click OK, then click Next and Finish, as appropriate, to return to 
the page. 
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Assuming you didn't skip Steps 6 and 7 above, the Common Tasks menu for 
the Detailsview control shows options for inserting, editing, and deleting 

s shown in Figure 12-29. There's also an Enable Paging option, which, 
lets you page through multiple records in the underlying table. 



Figure 12-29: 

Common 
Tasks menu 
for a 
Details 
View 
control. 



AdminPages/M...eItems.aspx" 



ET 



ltemld 

Ourltemld 

ItemName 



Content - Content! (Custom) 



-4*} 



0 

abc 



Detailsview Tasks 



abc 



Choose Data Source: SqlDataSourcel 



Configure Data Source. . 



Refresh Schema 



Edit Fields,.. 
Add New Field.. 



ItemDescription abc 
ItemPnce 0 
Edit Delete Mew 

1 2. 0 Enable Paging 

"kqlDataSource - S 0 Enable Inserting 

0 Enable Editing 

0 Enable Deleting 

Edit Templates 



Formatting a Detaitsl/ieu/ control 

Formatting a Detailsview control is very similar to formatting a Gridview. 
As always, you can use the Auto Format option on Common Tasks to choose 
a general appearance for the control. Use the Edit Fields option to choose the 
order of items in the control and currency/date formats. 

In Figure 12-30, for example, I moved the Ouritemid control to the top of the 
list under Selected Fields. Then I clicked the ItemPrice field name and set its 
DataFormatString to { 0 : c } to display the ItemPrice in currency format. 



Fields 



Figure 12-30: 

The Fields 
dialog box 
for a 
Details 
view 
control. 



JU (All Fields) 
] EioundField 
J ltemld 
J] Ourltemld 
J] ItemName 
^ ItemDescription 
J] ItemPrice 



ide-cted fields: 
i JO Ourltemld 

j ltemld 

J] ItemName 

j] ItemDescription 
ItemPrice 

^CommandField 

0 Auto-generate fields 

Refresh Schema 



0 

m 



BoundField properties: 

mm j 



NullDisplayText 




Readonly 


False 




ShowHeader 


True 




SortExpression 


ItemPrice 




Visible 


True 




B Data 




DataField 


ItemPrice 




DataFormatString 


{0:c> 




B Styles 




B ControlStyle 






B FooterStyle 







HeaderText 

The text within the header of this field. 



m.i Ui-- H-L in'.... d TiriiiL'lj'.eFidJ 



OK | Cancel 
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You can also size the control by clicking it and dragging any sizing handle 
that appears in its border. (The widths of the columns in Design view don't 
y match how things will look in the browser, but don't let that bug 
igure 12-31, for example, I've made the Detailsview control much 
wider than it was originally. 



Figure 12-31: 

The 
Details 
View 

control, 
widened. 



AdminPages/M...eItems.aspK f 



Content - Contentl (Custom) 




Ourltemld 

Itemld 

ItemName 

ItemDescription 

ItemPrice 

Edit Delete New 



Of course, you never really know how a control will look in real life until you 
view its page in a browser. Figure 12-32, for example, shows how the control 
from the previous example looks in Internet Explorer. The little numbers at 
the bottom represent other records in the same table. (They appear because 
I chose Enable Paging in the control's Common Tasks menu.) 



Figure 12-32: 
Details 
View 

control in 
Internet 
Explorer. 



Ourltemld BWG - 1 0 1 



ItemName Introduction to Bird Watching 

Stop being a PC potato, get out there in the 
real world, and see some actual non-human 
living organisms in the natural habitats. The 
ItemDescription fresh air and sunshine will do you good. In 
this course you'll learn all about the exciting 
hobby of bird watching. This is just sample 
text, this is not an actual course. 

ItemPrice $29.95 

Edit Delete New 



At the bottom of the control are the Edit, Delete, and New options. Clicking 
any one of those lets you (respectively) edit, delete, or change the record 
currently displayed in the control. 
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ombine DropDownList, Gridview, and DetailsView controls on a 
single page to create a Master-Details form. The DropDownList and Gridview 
controls are used to zero in on a specific record. The DetailsView control 
then allows you to edit one record. Such a scenario is useful when the data- 
base contains a lot of records and finding specific records isn't always easy. 

Figure 12-33 shows an example where choosing a user's name from the 
DropDownList control displays detailed information about all transactions 
made by that user in the Gridview control to the right. Clicking Select at the left 
side of the Gridview then displays the actual record from the Transactions 
table that represents that transaction. The DetailsView control contains Edit 
and Delete options, allowing you to change or delete that one record in the 
Transactions table. 



Figure 12-33: 

Sample 
Master- 
Details page 
for editing 
transactions. 



2. Select a transaction 



1. Choose a user 

"Bob 



3. Edit or delete 
transaction 



] 


ians Oui'Itemld 
Id 


ItemName Price 


Date 




Select 20000 BWG-201 


intermediate 

Bird $29.95 

Watching 


6/15/2006 


Select 20001 BWG-301 


Advanced 

Bird $39.95 

Watching 


6/21/2006 




Select 7 


0002 RWG-401 


Recovering 

from Reptile $49.95 

Wounds 


6/25/2006 




Userld 


£572e 


led-3553-40c7-99ce-lad3bcece831 



Itemld 10003 

TransactionDate 6/21/2006 
IsFaid 

Transaction^ 20001 
Edit Delete 



Before we get into specifics, let me point out that I started by adding a table 
with two columns and three rows to a blank page. The text you see on the 
page, like l . Choose a user is just text typed right into the table cell. The 
text and DropDownList control are in the top-left cell. The text and Gridview 
control are in the cell to the right of that one. 

The second row in the table I left empty to put a little empty space above the 
third row. The left column of the third row contains the text 3 . Edit or 
Delete transaction, and the last table cell contains the DetailsView 
control. 
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That's just how I organized the text and controls on the page. What makes all 
the controls work together is the way in which the GridView control is fil- 
how only transactions for the user name selected in the drop- 
and the way the Detailsview control is filtered to show only the 
record associated with the selected row in the Gridview control. 



Master-Details DropDou/nList control 

Let's start with the DropDownList control, which is named DropDownListl. 
To show user names, that control is bound to the UsersAndltemsView view 
from Chapter 11. From that view, only Userld and userName are selected. Its 
Return Only Unique Rows option is selected to show only unique user names. 
I set its ORDER BY option to sort the records by UserName, so the names will 
be in alphabetical order by name. Figure 12-34 shows the Configure the Select 
Statement page for that DropDownList control. 



Figure 12-34: 

The 
Configure 
the Select 
Statement 
page for 
Master- 
Details 

DropDown 
Listl. 



© Specify columns from a table or view 
Name: 

UsersAndltemsView 
Columns: 



IB* 

0 Userld 

0 UserName 

TransactionDate 
□ IsPad 



[^} Transactionid 

□ Itemld 

□ Ourltemld 
Q ItemName 

□ ItemPrice 



0 Return only unique rows 



SELECT statement: 

SELECT DISTINCT [Userld], [UserName] FROM [UsersAndltemsView] ORDER BY [UserName] 



On the Choose a Data Source page of the Data Source Configuration wizard, 
I set UserName as the value to display in the control, and set Userld as the 
value of the control, as shown in Figure 12-35. That means that the control 
will show user names. But, once the user makes a selection, the value of the 
control will actually be that user's Userld — the GUID that's automatically 
assigned to each new user account. We need the drop-down list's value to be 
that userld, because that's the value that provides the link to transactions. 

The Enable Postback option for the DropDownList control's Common Tasks 
menu must be selected for the page to work. Because that postback (com- 
bined with some filtering you'll see in a moment) is what allows the 
Gridview control to show only transaction information for the user whose 
name is selected in the control. 
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Figure 12-35: 



P Books 
DrOPDOWIl Select a data sot 



DropDown 
List 

control in 
Master- 
Details. 



Data Source Configuration Wizard 

ihoose a Data Source 



Select a data si 
SqlDataSourcel 
Select a data field to display in the DropDownList: 
UserName vl 



Select a data field for the value of the DropDownList: 



IE 



To customize the appearance of the DropDownList control, first click the 
control to select it. Then use its Properties sheet to refine the control's font 
and width. 



Master-Detaits GridVieut control 

The Gridview control, named Gridviewl in the Master-Details example, is 
bound to the DetailedUsersItemsView view created back in Chapter 11. It 
uses a few fields from that view to make it easy for the user to locate a spe- 
cific transaction, as shown in Figure 12-36. 



Figure 12-36: 

Selected 
view and 
columns 
used for the 
Master- 
Details 
Gridview 
1 control. 



' Specify columns From a table or view 
Name; 

DetailedUsersItemsView 
Columns: 

[CP 



□ Userld 

Email 
| | LoweredErnail 
Q CreateDate 



[2 LastLoginDate 
| | UserName 

□ LastActivityDate 
0 Transactionld 

□ Itemld 



0 Ourltemld 
0 It em Name 
0 ItemPrice 
0 TransactionDate 

□ IsPaid 



Q Return only unique rows 



L 



ORDER BY. . 
Advanced.. 



SELECT statement: 

SELECT [Transactionld], [Ourltemld], [ItemName], [ItemPrice], [TransactionDate] FROM 
[DetailedUsersItemsView] WHERE ([Userld] = ^Userld) ORDER BY [Transactionld] 



The critical factor in getting the Gridview control to show only records for 
the user whose name appears in the DropDownList control is in the where 
clause. After clicking the WHERE button in Figure 12-36, 1 set up the condition 
as shown in Figure 12-37. Recall that the value of the DropDownListl control 
will be one person's userld. Therefore, the condition specified in Figure 12-37 
is for the Gridview to show only records where the Userld field in the view 
matches the Userld that's in the DropDownListl control. 



2% 
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Figure 12-37: 

cjfi^jtjj 

for Master- 
Details 
Gridview 
control. 



Column: 




Parameter properties 




M 


Control ID: 


As 




| DropDownListl |v| 




W 


Default value: 


Source: |l 


Control 


H 




SQL Expression: 




Value: 


[Userld] = @UserId 




DropDownListl .SelectedValue 



After finishing the Data Configuration Wizard for the Gridview control, you 
need to choose Enable Select from its Common Tasks menu. Doing so places 
the Select option to the left of each record. As you'll see in a moment, the 
Detailsview control can then be configured to show only the record that's 
represented by the selected row in the Gridview control. 



The Master-Details DetailsVieu) control 

The Detailsview control in the Master-Details example needs to be filtered 
so that it displays only the transaction associated with whatever row is 
selected in the Gridview. Also, that control needs to be bound to a single 
table that has a primary key. Otherwise, you couldn't use the control to edit 
or delete records. 

In this example, the Configure the Select Statement page for the Detailsview 
control looks like Figure 12-38. Note that it's bound to the Transactions 
table, and shows all fields from that table (the * is short for "all columns"). 



Figure 12-38: 

Table and 
columns 
bound to the 
Details 
View 
control. 



Specify columns from a table or view 
Name: 

Transactions 
Columns: 

pr 

□ Userld 

□ Itemld 
| | Transact inn D at >? 

□ IsPaid 



□ Transactionid 



[Zl Return only unique rows 



SELECT statement: 

SELECT * FROM [Transactions] WHERE ([Transactionid] - ©Transactionid) 



To ensure that the Detailsview control shows only data associated with the 
record that's selected in the Gridview control, click the WHERE button and 
choose options as shown in Figure 12-39. Those options, in English, say 
"where the Transactionid in the Transactions table matches the 
Transactionid in whatever row is currently selected in the GridView." 



Chapter 12: Using Data in Web Pages 




Figure 12-39: 

cjji^jtjj 

for the 
Details 
Viewl 
control. 



Column: 


Parameter properties 
Control ID: 






I 


ks ^ 


GridViewl [v| 




Default value: 


Source: 


I 


Control |vj 




SQL Expression; Value: 


[Transactianld] = ©Transactionld GridViewl .Selected Value 



On the Common Tasks menu for the Detailsview control, choose Enable 
Edit and Enable Delete to display the Edit and Delete options that allow the 
user to edit the transaction. 



When you first open a page like the Master-Details example, the Detailsview 
control will not be visible in the Web browser. That's because it's filtered to 
show only the transaction associated with the row that's selected in the 
Gridview. So when there's nothing selected in the Gridview, there's nothing 
for the Detailsview control to show. But as soon as you click Select at the 
left side of the Gridview, your Detailsview control will appear showing the 
selected transaction record. 

As an alternative to showing nothing when the Detailsview control has no 
record, you can edit its EmptyData Template to show a message. Here's how: 

1. In Design view, open the Detailsview control's Common Tasks menu 
using the little triangle button or by right-clicking the control and 
choosing Show Smart Tag. 

2. On the menu, click Edit Templates. 

3. In the drop-down list that appears, choose EmptyData Template. A 
small box appears in which you can type and format text. For exam- 
ple, you might type Select a transaction to see details. 

4. Right-click the template you just filled and choose End Template Editing. 

From now on, when you first open the page in a Web browser, you'll see what- 
ever text you typed into the EmptyData Template rather than nothing. As soon 
as you select a transaction from the Gridview control, that text will be replaced 
by the actual Detailsview control showing the selected transaction. 



General GridVieu) and betaitsViert 
considerations 

The Gridview and Detailsview controls are both new in ASP.NET 2.0, and 
offer easier, better editing capabilities than the older Detailsview and 
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Formview controls described later in this chapter. Both Gridview and Details 
view have an Auto Format option on their Common Tasks menu, making it 
efine a general look and feel for the control right off the bat. 



Both GridView and Detailsview also have an enormous number of proper- 
ties you can tweak to get exactly the look and feel you want. There are so 
many properties that it would take more pages than there are in this book to 
describe them all. But rather than worry about every single property, a good 
general strategy might be to use Auto Format to get a general look for the 
control. Then use Properties to refine details, but only if you want to change 
something about the format. 

Beyond all the properties for the control as a whole, there are many proper- 
ties for each column in a Gridview, and each field in a Detailsview. To get 
to those properties, you have to choose Edit Columns or Edit Fields from the 
control's Common Tasks menu. Then, under Selected Fields in the dialog box 
that opens, click on a specific field name under Selected Fields. The proper- 
ties for that one column or field appear in a Properties sheet within the 
dialog box. 

Remember that you can use both Gridview and Detailsview either to show 
data or to allow editing of data in the database. But if you want to use either 
control to edit data, you must bind the control to a single table that has a pri- 
mary key. Also, when using the Detailsview control to edit data, you need to 
remember to click the Advanced button in the Configure Select Statement page, 
as described under "Binding a Details View control" earlier in this chapter. 

The DataList and Formview controls described later in this chapter are 
older ASP.NET controls. Although they hint at offering data-editing capabili- 
ties, they are much harder to use for that purpose. Your best bet is to try to 
use Gridview or Detailsview when you know, in advance, that you want to 
edit data in the underlying database. Use DataList and Formview when 
you're just concerned with showing data on a page, without letting users 
make changes to that data. 



Usinq the DataList Control 

The DataList control is ideal for when you want to show data to users as 
though it were normal text, as opposed to items in a table or on a form. The 
DataList control's biggest strength is that it allows you to list data in just 
about any format imaginable. Using the DataList control is much like using 
the other Data controls you've seen in this chapter. Just follow these steps: 

1. Create or open an . aspx page so you're in Design view. 

2. In the Toolbox, expand the Data category of controls. 
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3. Drag a DataList control from the Toolbox onto the page (or Content 
Placeholder on a page that has a Master Page). 



the DataList control's Common Tasks menu, select Choose Data 
ceO<New data source. ..>. 



5. As usual, choose Database and click OK. 

6. Choose your usual connection string, and click Next. 

That gets you to the standard Configure the Select Statement page. 

7. In the Configure the Select Statement page, choose the table or view 
from which the control will retrieve data. 

As always, you can use the WHERE button to limit the records shown. 
Use the ORDER BY button to specify a sort order. 

Figure 12-40 shows an example where I've opted to show all fields except 
itemiD from the items table. I also used the ORDER BY button to set the 
sort order to OurltemID, Ascending order (though the only place you can 
see that is in the order by clause at the end of the select statement). 

8. Click Next and Finish to return to the page. 



Figure 12-40: 

Sample field 
selections 
for a 
DataList 
control. 
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Configure the Select Statement 



SQL 



How would you like to retiieve data from your database? 

Q Specify a custom SQL statement or stored procedure 
■'.*) Specify columns from a table or view 
Name: 



Items 



3 



Columns: 



IB* 

□ Itemld 
;0 Ourlternld 
0 ItemName 
0 ItemDescription 



0 ItemPrice 



0 Return only unique rows 



SELECT statement: 

SELECT [Ourlternld], [ItemName], [ItemDescription], [ItemPrice] FROM [Items] ORDER BY 
[Ourlternld] 



| < Previous | [j Next > 



In Design view, the bound DataList control appears as a placeholder of field 
names with "abc" placeholders for text, and random values like 0 and 0.1 as 
placeholders for numbers. When you view the page in a Web browser, you get 
a better idea of how the data will look to a person viewing the page through a 
Web browser. Figure 12-41 shows how the fields from the items table look 
when viewed through an unmodified DataList control. 
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Figure 12-41: 

Fields from 
Figure 12-40 
as displayed 
by a 
DataList 
control. 
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Ourltemld: BWG-101 

ItemName: Introduction to Bird Watching 

ItemDescription; Stop being a PC potato, get out there in the real world, 
and see some actual non-human living organisms in the natural 
habitats. The fresh air and sunshine will do you good. In this course 
you'll learn all about the exciting hobby of bird watching. This is just 
sample text, this is not an actual course. 
ItemPrice: 29,9500 

Ourltemld: BWG-201 

ItemName: Intermediate Bird Watching 

ItemDescription: Once you've mastered the basics of watching birds, 
you're ready to start learning about some of the advanced equipment 
you can use to improve your watching time. In this course you'll learn 
about binoculars, telescopes, cameras, and whatever else someone 
might use in bird watching. Again, this is just fake sample text used for 
demo purposes. 
ItemPrice: 29.9500 



Ourltemld: BWG-301 

ItemName: Advanced Bird Watching 



£]Done 
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Formatting a DataList control 

The real beauty of the DataList control comes into play when you edit its 
template. To do so, click the DataList control to select it, then click the tiny 
triangle button near its upper-right corner. Or right-click the DataList con- 
trol and choose Show Smart Tag. From the Common Tasks menu that appears, 
choose Edit Templates. The control takes on a completely different look, as 
shown in Figure 12-42. 



Figure 12-42: 

A 

DataList 
control Item 
Template. 



%ataListl - Item Templates 
ItemTemplate 

Ourltemld: POurltemldLabel] 
ItemName: ptemNameLabel] 
ItemDescription: 
fitemDescnptlonLabel] 
ItemPnce: ptemPnceLabel] 



The Item Template is like a small page that you can edit using standard word 
processing techniques and HTML. Text that's not enclosed in square brackets 
is just plain text typed right into the control. You can edit, format, or delete 
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that text however you like. For example, you can select a chunk of text and 
use options on the Formatting toolbar to make it bold, change its font, or 




Items enclosed in square brackets are Label controls that are bound to data 
in the underlying database table or view. Those you can format in a similar 
manner. But you don't drag the mouse pointer through the item as you would 
with regular text. You just click the item to select it. Then choose options 
from the Formatting toolbar. 

To select multiple Label controls, click one to select it. Then hold down the 
Ctrl key while clicking others that you want to select. 

You can also rearrange things in the itemTemplate to change how things 
look on the page. Moving things around can be a little awkward, especially if 
you're trying to align controls side-by-side. That's because the items word- 
wrap within the template, just as they would in a word processing program. 
To get things side-by-side, you may need to widen the control. To do so, click 
the top of the DataList control to select it. Then use the sizing handle on its 
right border to widen or narrow the control. 

To move an item, just drag it to where you want to put it. Or, click the item 
to select it, press Ctrl+X to cut it, click where you want to put the control, 
and press Ctrl+V to paste it. If you want a space to appear between items in 
the page, make sure to insert a blank space between the items within the 
template. 

Figure 12-43 shows an example where I deleted all the text labels, leaving 
only the bound Label controls. Those I rearranged so that the itemNameLabel 
is on the top. The itemDescriptionLabel, OuritemidLabel, and 
itemPriceLabel controls are side-by-side on one line, with one space 
between them. 



Blank lines in a DataList control 



Though you can't see them, any extra carriage 
returns at the bottom of the control will add 
height to the control, and will also put extra 
space between each record on the Web page. 
(A carriage return is an invisible character that 
gets added every time you press the Enter or 
Return key.) 

To reduce the height of a DataList control, 
you may need to remove some of those extra 



carriage returns. You'll need to be in the Edit 
Templates mode, like Figure 12-42, to do that. 
Click inside the template, then move the cursor 
to the bottom of the template (press Ctrl+End). 
From there, each time you press Backspace 
you'll remove one carriage return (one blank 
line). Ifyou gotoofar and delete a control within 
the template, press Undo (Ctrl+Z) to undo the 
deletion. 
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Figure 12-43: , „ 

DropBOTKi 

Item fttemNameL 



Template 
radically 
rearranged. 



-m— 



fttemNameLabel] ^ 

fitemDescnplionLabel] fburltemldLabel] ^ItemPriceLabel] 



"SqIDataSource - SqIDataStx 



I also boldfaced the itemNameLabel control and italicized the itemPriceLabel 
control, just to illustrate the idea. I'll show you how that DataList control 
looks in a Web browser in a moment. First, let's talk about . . . 



Formatting dates and 
numbers in a DataList 

To apply a date or currency format to a field, click its Label control to select 
the control. Then, click its tiny triangle button to show its Common Tasks 
menu as shown in Figure 12-44. Then, choose Edit DataBindings. 



Figure 12-44: 

Common 
Tasks for 
a single 
bound 
Label 
control. 
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ItemTemplate 

fitemNameLabel] 

fttemDescnptionLabel] { 



)urItemIdLabei] *fltemPnce Label] 



Edit DataBindings.. 



A DataBindings dialog box for the selected control opens. If the item you're for- 
matting is a currency or date value, use the Format drop-down list to choose a 
format for the item. For example, Figure 12-45 shows the DataBindings dialog 
box for the itemPrice control in my sample DataList. You can see where I've 
chosen Currency - { 0 : c } from the Format drop-down list to display that 
value in Currency format. 

Figure 12-46 shows the results in a Web browser. The arrangement and 
appearance of data on the page is a direct reflection of the arrangement of 
the Label controls shown back in Figure 12-43. Each ItemPrice is shown in 
Currency format ($29.95) rather than the default 29.9500 format. 
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1 Figure 12-45: 

The Data 
Bindings 
dialog box 
for the 
ItemPrice 
Label 
control. 



ItemPriceLabel DataBindings 



5ofect the property to bind to. You can then bind it by selecting a field. Alternatively, you can bind it 
udjg acustair^ode expression. 



m 



_j* Enablea 
^ TemplateControl 
j Text 
Visible 



Q Show all properties 



Binding for Text 
® Field binding; 

Bound to: 

Format: 

Sample: 

O Custom binding: 
Code expression: 



Currency - -{0:0 
$1.00 



EvalfltemPrice", '{0:C}") 
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Figure 12-46: 

The 

DataList 

control from 
Figure 12-43 
in a Web 
browser. 
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Introduction to Bird Watching 

Stop being a PC potato, get out there in the real world, and see some 
actual non-human living organisms in their natural habitats. The 
fresh air and sunshine will do you good. In this course you'll learn 
all about the exciting hobby of bird watching. This is just sample 
text, this is not an actual course. BWG-lOl $29.95 

Intermediate Bird Watching 

Once you've mastered the basics of watching birds, you're ready to 
start learning about some of the advanced equipment you can use to 
improve your watching time. In this course you'll learn about 
binoculars, telescopes, cameras, and whatever else someone might 
use in bird watching. Again, this is just fake sample text used for 
demo purposes. BWG-201 $29.95 

Advanced Bird Watching 

Renowned ornithologist Robin Oriole presents a fascinating journey 
into the names of all the birds you might see out there. Of course, 



Done 
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Shouting a DataList in columns 

The DataList control can also show data in newspaper-style columns. To 
use this feature, you'll need to end Template Editing if you're still viewing the 
Item Template in the Design surface. Right-click the DataList control and 
choose End Template Editing, or choose End Template Editing from the 
DataList control's Common Tasks menu. Then, click the tiny triangle near the 
upper-right corner of the DataList control (not a single Label control) and 
choose Property Builder. 
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In the Properties dialog box that opens, click on General in the left pane. Then 
specify the number of columns you want to display from the Columns option. 

^^j^i^^ayout option, you need to choose Table. If you choose Flow, the 
columns won't work. Use the Flow option only when you want data displayed 
without a table. 

Use the Direction option to choose a Horizontal or Vertical orientation for the 
columns. If you choose Horizontal, the first record's data appears first, the 
second record's data appears in the column to the right, and so forth. If you 
choose Vertical, the first record's data appears first, the second record's data 
appears under that one in the same column, then the third record, and so 
forth down the page. 

To put some space between columns, click the Borders option at the left side 
of the Properties dialog box. Then set the Cell Spacing setting to the number 
of pixels to put between each column. Optionally, if you want to show border 
lines on the page, choose an option from the Grid Lines drop-down list. Then 
choose a color and width for the borders. 



To see the results of your changes, click OK to close the Properties dialog 
box. Then view the page in a Web browser. Figure 12-47 shows an example 
where I set Columns to 2, Direction to Horizontal, and Cell Spacing to 40. It's 
the same data as in Figure 12-46 split into two columns. 
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Figure 12-47: 

The 

DataList 

control 
showing 
data in two 
columns. 



<£>■ 
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Introduction to Bird Watching 

Stop being a PC potato, get out 
there in the real world, and see 
some actual non-human living 
organisms in their natural 
habitats. The fresh air and 
sunshine will do you good. In this 
course you'll learn all about the 
exciting hobby of bird watching. 
This is just sample text, this is not 
an actual course. BWG-101 $29.95 



Advanced Bird Watching 

Renowned ornithologist Robin 
Oriole presents a fascinating 



Intermediate Bird Watching 

Once you've mastered the basics of 
watching birds, you're ready to start 
learning about some of the advanced 
equipment you can use to improve your 
watching time, In this course you'll 
learn about binoculars, telescopes, 
cameras, and whatever else someone 
might use in bird watching. Again, this 
is just fake sample text used for demo 
purposes. BWG-201 $29.95 



Introduction to Reptile Watching 

Sick of birds? How about the exciting 



Usinq DataList to short pictures 

In Chapter 11,1 created a sample table named Photos that contains two text 
fields named PhotoCaption and PhotoURL. The PhotoCaption field contains 
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plain text, while the PhotoURL field contains the path to a picture in a folder 
named FlowerPix. You can use a DataList control to display the actual pic- 
hich each PhotoURL refers. 



There's nothing special about how you initially create the control. The steps, 
as usual, are: 

1. Drag a DataList control from the Data group in the Toolbox onto any 
. aspx page or Content Placeholder. 

2. From the DataList control's Common Tasks menu, select Choose Data 
SourceO<New Data Source>. 

3. Choose Database, then click OK. 

4. Choose your standard connection string and click Next. 

5. Choose your table or view and columns to display. 

For this example, I'll retrieve the PhotoCaption and PhotoURL fields 
from the Photos table, as in Figure 12-48. 

6. Click Next and Finish. 



Figure 12-48: 

Binding 
DataList 
control to 
fields from 
the Photos 
table. 



Name: 



Photos 




Columns: 




p* 




□ Photold 




0 PhotoCaption 




0 PhotoURL 




SELECT statement: 



I I Return only unique rows 



SELECT [PhotoCaption], [PhotoURL] FROM [Photos] 



In Design view, the DataList control appears with the usual field names and 
placeholders (abc for the text fields). In a Web browser, you still only see the 
links to the images, for example -/images/FlowerPix/FlowerOl . jpg 
rather than the actual photo. To get the photo to show, you need to edit the 
DataList control's ItemTemplate. 

As always, you can edit the template by choosing Edit Templates from the 
control's Common Tasks menu, or by right-clicking the control and choosing 
Edit TemplatesOItem Template. The ItemTemplate is like a miniature page 
that defines how each record from the underlying table will be displayed 
on the page. Initially the ItemTemplate just shows each field name as text 
typed right into the template, and each field as a Label control, as shown in 
Figure 12-49. 
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for a 



DataList 

control. 
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iFl^fcC^Bfcn: fPhotoCaptionLabel] 
lotJtra^'hotoXIRLLab el] 
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To show each picture as an actual picture rather than the PhotoURL value, 
you need to get an image control from the Standard group of tools into the 
ItemTemplate. Then bind the imageURL property of that control to the 
PhotoURL field. You can start by deleting what's already in the template. Here 
are the steps: 

1. Delete all the text and both Label controls from the ItemTemplate, so 
that the template is just an empty box. 

2. In the Toolbox, click the + sign next to Standard to show the Standard 
ASP.NET controls. 

3. Drag an image control from the Toolbox into the ItemTemplate. 

The control appears as a small box containing a red X (it's just a place- 
holder for each picture that will be shown in the Web browser). 

4. Click the image control's Common Tasks button and choose Edit Data 
Bindings. 

5. In the dialog box that opens, click ImageURL in the left column under 
Bindable Properties. 

6. In the right column, choose Field Binding. 

7. From the Bound To drop-down list, select the name of the field that 
contains the link to the image. 

In the example of the Photos table, that's the PhotoURL field, as shown 
in Figure 12-50. 

8. Click OK. 

Viewing the page in a Web browser at this point will display each picture 
rather than just the URL to the picture. If that's all you want, then you're 
done. But chances are you'll want something fancier than just a bunch of pic- 
tures shown down the page. So let's look at some things you can do to fancy 
things up. 
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Figure 12-50: 

The 

ItemTemplate 
for a 
DataList 
control. 



Imagel DataBindings 



^ct the property to bind to. You can then bind it by selecting a field. Alternatively, you can bind it 
j^ode expression. 



m 



/J 1 AlternateText 
fjf Enabled 
ImageUrl 
|J Tern plate Control 
Visible 



Q Show all properties 



Binding for ImageUrl 
.•Field binding; 
Bound to; 
Format: 
Sample; 

O Custom binding: 
Code expression: 
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Sizing the pictures 

You might want to make each picture of equal size so you can put them into 
columns. Click on the image control to select it. Then, in the Properties sheet, 
set the width property to however wide you want each picture to be. For 
example, in Figure 12-51, I've set the Width of the image control to 150 pixels. 
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ItemTemplate 


Properties □ 






DataList l.ItemTemplates. ItemTemplate. Imagel » 
















0 Accessibility 


Figure 12-51: 

Width of the 




E Appearance 


■ 


E Behavior 
El Data 


Image 

control set 




B Layout 




Height 




ImageAlign NotSet 


to 150 
pixels. 


: o -o 


Width 150pn 




B Misc 
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Shouting pictures in columns 

Recall that the DataList control can show data in multiple columns. To 
show pictures in columns, you first need to get out of Template Editing mode. 
Then use the Property Builder for the DataList control to configure the 
columns. The steps are: 

1. Right-click the ItemTemplate and choose End Template Editing (or 
choose End Template Editing from the Common Tasks menu). 

2. Choose Property Builder from the DataList control's Common 
Tasks menu. 
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In the Properties dialog box, set the Columns option to the number of 
columns you want, then choose either Horizontal or Vertical for the 
ntation. 



y example, I set Columns to 4 and Direction to Horizontal, as 
shown in Figure 12-52. 



Figure 12-52: 

Going 
for four 
columns of 
photos here. 



DataListl Properties 

1 General 
^ Format 
r\ Borders 



Header and footer 
0 Show header 
0 Show footer 



Repeat layout 
Columns; 
Direction: 
Layout: 



B 



4. Optionally, choose other formatting options from the Properties 
dialog box. For the example you're about to see, I did the following: 

• Click Format in the Properties dialog box, click the + sign next to 
Items, click Normal Items, set the Horizontal Alignment to Center, 
and set the Vertical Alignment to Bottom. 

• Click Borders in the Properties dialog box and set the cell spacing, 
padding, and border lines. For this example, I only set Cell Spacing 
to 10 to put a little space between each picture. 

5. Click OK in the Properties dialog box. 

Viewing the page in a Web browser at this point shows the pictures in 
columns, as in the example shown in Figure 12-53. 
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Adding picture captions 

rs suppose that you also want to show each picture's caption. But as an 
bnus, you want to make each caption a link that, when clicked, shows 
Ssponding image at full size, rather than with the Width you set for 
the image control. The trick here is to add a HyperLink control to the tem- 
plate. Set the Text of that link to the PictureCaption field, and the 
NavigateURL property to the PictureURL field. Here are the steps: 




1. In Design view, choose Edit Templates from the DataList control's 
Common Tasks menu. 

2. In the ItemTemplate, click to the right of the image control and press 
Enter to make a little room under the control. 

3. From the Standard group of tools in the Toolbox, drag a HyperLink 
control into the ItemTemplate, so that it's under the image control. 

4. From the HyperLink control's Common Tasks menu, choose Edit 
DataBindings. 

5. Set the Text property to the name of the field that contains the text 
to show. 

In my example, that would be the PhotoCaption field, as shown in 
Figure 12-54. 



Figure 12-54: 
The Text 

property for 
the sample 

Hyper 
Link 

control. 



HyperLink! DataBindings 



SB) 



Select the property to bind to, You can then bind it by selecting a field. Alternatively, you can bind it 
using a custom code expression, 



Bindable properties: 

jj* Enabled 
j]" ImageUrl 

NavigateUrl 
i^f* TemplateControl 
j3* Text 
J* Visible 



Show all properties 



Refresh bchema 



Binding for Text 
• Field binding: 
Bound to: 
Fur mat: 
Sample: 

0 Custom binding: 
Code expression: 



6. In the left column, click on NavigateURL to define where the link will 
take the user. 

7. Set the Bound To property for the NavigateURL property to the name 
of the control that contains the path to a page or picture. 

In this example, that would be the PhotoURL field, as shown in 
Figure 12-55. 
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® Field binding; 
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Format: 
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8. Click OK in the dialog box. 

Figure 12-56 shows how the page looks when viewed in a browser. When a 
user clicks a picture caption, the effect will be to open the picture, full size, in 
a new browser window. The user can then click the Back button in the 
browser to return to the previous page where all pictures are shown in 
columns. 




Figure 12-56: 

Photos with 
captions 
displayed as 
hyperlinks. 



To download a picture, the user just needs to right-click the picture and 
choose Save Picture As. You could add instructions to the page to explain 
that to the user. 
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Usinq a DataList to show HyperLinks 

lotos example, I used a HyperLink control in a DataList 
iplate to show hyperlink text from a table (the PhotoCaption field), 
and to define where the link takes the user (the PhotoURL field). You can use 
the same technique to show a list of links that are stored in a Database table. 

In Chapter 11,1 created a sample table named Links that contains two text 
fields named siteName (the name of a Web site) and SiteURL (the URL of the 
site). It's a small sample table, as shown in Figure 12-57. But of course the 
technique described here would work with any number of records in a table. 
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Figure 12-57: 

Sample 
Links table 
with site 
names and 
URLs. 



Links: Query(...ASPNETDB.MDF) 




5iteld 


SiteName 


SiteUPL 


► 


1 


ASP.NET 


http://asp.net 




2 


Microsoft Developer Network 


http://msdn.microsoft.com 




3 


DotNetJunkies 


http ; / /www . dot net junkies .com/ 




4 


.netECommerce 


http://www.dotnetecommerce.com/ 




5 


XHTML 2.0 Spec 


http://www.w3. org/MarkUp/ 




6 


CSS Home Page 


http://WWW.W3. org /Style/CSS/ 


* 


NULL 


NULL 


NULL 





A DataList control containing a standard HyperLink control that's bound to 
the SiteName and SiteURL fields in the table will present a nice list of links. 
Here are the steps to create the list: 

1. From the Data group in the Toolbox, drag a Data List control to any 
. aspx page or content placeholder. 

2. From the DataList control's Common Tasks menu, select Choose Data 
SourceO<New Data Source>. 

3. Choose Database and click OK. 

4. Choose your normal connection string and click Next. 

5. Choose the table that contains the site data, then choose the columns 
that contain the site name and URL. 

For my example, that would be the SiteName and SiteURL fields in the 
Links table, as shown in Figure 12-58. 

6. Optionally, use the ORDER BY button to alphabetize the links by 
SiteName. 



7. 



Click Next, then click Finish. 
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Specify columns from a table or view 



LJ Return only unique n 



SELECT statement: 

SELECT [SiteName], [SiteURL] FROM [Links] ORDER BY [SiteName] 



You see the control with the standard field names and abc placeholders. To 
change that to a list of working hyperlinks, you need to remove the text and 
labels that are currently in the control. Then put in a single HyperLink con- 
trol. Here's how: 



1. Choose Edit Templates from the DataList control's Common Tasks 
menu. 

2. Delete the text and Label controls that are currently in the template, 
so that the template is empty. 

3. From the Standard group of controls in the Toolbox, drag a 
HyperLink control into the Template. 

4. From the Hyperlink's Common Tasks menu, choose Edit DataBindings. 

5. In the left column of the dialog box that opens, click Text, then set 
the Bound To property to the name of the field that contains the site 
name. 

In my example, that would be the SiteName field. 

6. In the left column, click the NavigateURL property. 

7. Set the Bound To property to the name of the field that contains 
the URL. 

In my example, that would be the SiteURL field. 

8. Click OK. 



At this point, the ItemTemplate looks like Figure 12-59. 



When viewed in a Web browser, the page shows each site's name as a hyper- 
link. Clicking the link opens the page to which the link refers. 
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e contains a 
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Link 
control. 



ItemTemplate 
HyperLink 1] 



Keep in mind that the ItemTemplate is like a mini Web page onto which you 
can place any text or image. For example, let's say you have a small graphic 
image of a bullet you'd like to place to the left of each list item. 

First, you'll need to make a little space to the left of the HyperLink control. 
Click inside the template, press Ctrl+Home a couple of times, then press the 
spacebar and left arrow key to make a little space. Then, just drag your little 
image into the space you made, as in Figure 12-60. 



Figure 12-60: 

Graphic 
in Item- 
Template 
(left) and in 
browser 
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If you want to put a bullet character and space to the left of each item, 
rather than a graphic image, switch to Source view by clicking the Source 
button at the bottom of the Design surface. Find the <asp : HyperLink . . . > 
tag between the <itemTemplate> and </itemTemplate> tags. To the left of 
that <asp : hyperlink . . . > tag, type • (for the bullet) and   (non- 
breaking space) for the blank space. Both characters should be right up 
against the <asp: Hyperlink. . .>tag like this: 

&bull ; &nbsp ; <asp : HyperLink ID= "HyperLinkl " . . . > 

When you switch back to Design view, by clicking Design at the bottom of the 
Design surface, you'll see the character and space in place. Of course, in the 
Web browser, the character will appear to the left of each item in the list. 
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As you've seen, the DataList control offers lots of different ways to display 
data from database tables. The template you define is applied to every record 
rieve from the database table. But sometimes, you don't want to 
ia from multiple records. Sometimes, you just want to show a single 
record, or a single piece of information from a table. For those occasions, the 
Formview control might be your best bet. 



The FormVieuJ Control 

The Formview control is similar to the DetailsView control in that it only 
shows one record at a time. But it's also similar to a DataList control in that 
it displays data in such a way that it looks like text printed on a page rather 
than a table or form. 

If you want to display and edit one record at a time, you're much better off 
using the DetailsView control, as opposed to Formview. The DetailsView 
control, which is new in ASP.NET 2.0, is much easier to work with. 

The Formview control works like the other Data controls in that you drag 
it to a page, define your data source, and optionally edit its template to get 
the exact look you want. Because it's limited to displaying a single record, 
Formview can be useful for displaying a single item of data, such as a sum 
or total. Here's an example. 

In Chapter 11, 1 created a view named Detailedusersitemsview which con- 
tains detailed information about every transaction. Suppose you want to sum 
up the itemPrice field in that view to see a grand total of all transactions. 
You'd start by dragging a Formview control onto a page. From its Common 
Tasks menu, choose New Data Source, choose Database, and click OK. As 
always, choose the standard connection string, and click Next. 

On the Configure the Select Statement page, you won't be able to use the 
"Specify columns from a table or view" in this example because you need a 
sum of all the numbers in a view. You have to choose "Specify a custom SQL 
statement or stored procedure," then click Next to get to the more advanced 
query editor where you can specify a sum. On the next page that appears, 
click the Query Builder button. 

In the Add Table dialog box that opens, click the Views tab, click Detailed 
usersitemsview, click Add, then click the Close button in the Add Table 
dialog box. In the Query Builder, scroll down the field list for the view and 
choose itemPrice. Right-click some empty space in the top page of the 
Query Builder and choose Add Group By. Then, in the query grid, set the 
Group By column for the ItemPrice field to Sum, as shown in Figure 12-61. 
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Click OK at the bottom of the Query Builder. Then click Next, and then click 
Finish. In Design view, you end up with a Formview control that just shows: 



Exprl : 0 






Viewing that page in a Web browser shows something like the example below 


(though the number will be the sum of whatever values are in the 


ItemPrice 


field of the view at the moment): 






Exprl: 469.4000 







As it stands, the information presented by the control isn't exactly self- 
explanatory. But you can edit the control's template to show anything you 
want. First you need to close the Web browser (if it's open) to get back to the 
Design view of the page. Then right-click the Formview control, choose Show 
Smart Tag, then choose Edit Templates. 

To show the sum in currency format rather than in the 469.4000 format, do as 
you did in the DataList control. That is, right-click [ExprlLabel], choose 
Show Smart Tag, then choose Edit Data Bindings. Set the Format to Currency 
- { 0 : c } and clear the "Two-way databinding" check box as shown in Figure 
12-62, and click OK. 

You need only choose "Two-way databinding" if you intend to edit data in a 
Formview control. However, if you want to edit data, you'd be better off using 
a DetailsView control, as it's a lot easier with DetailsView. 

In the ItemTemplate, replace the text Exprl : with Grand Total : as shown 
in Figure 12-63. 



When you view the page in a browser, the control shows: 



Grand Total: $469.40 
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Figure 12-62: 
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$1.00 
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which is the sum of all the itemPrice fields in DetaileditemsUsersView, 
expressed in a more meaningful format than Exprl : 4 69.4000. 



Figure 12-63: 
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Shouting subtotals 

Showing just the grand total of sales on a Web page is useful, but chances are 
you might also want to see things subtotaled by customer, product, or month. 
You could add a Gridview control on the same page as the Grand Total, and 
have that Gridview control show multiple records with the appropriate 
grouping. 

For example, with the previous Formviewl control still on the page, press 
Ctrl+Home a couple of times, and press Enter a couple of times, to make 
some space above the FormView control. Then drag a Gridview control into 
that space at the top of the page. 

From the Gridview's Common Tasks menu, select Choose Data SourceO 
<New Data Source>, as usual. Then choose Database and click OK. Choose 
your usual Connection String and click Next. You'll come to the Configure 
the Select Statement page where you'll once again need to choose "Specify 
a custom SQL statement or stored procedure," then click Next. 
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In the next box that opens, click the Query Builder button to get to the more 
advanced query builder. In the Add Table dialog box that opens, click the 
click DetailedUsersitemsView, click Add, then click Close to 
Add Tables dialog box. 



How you set up the query depends on how you want to group the subtotals. 
First, right-click some empty space at the top of the Query Builder and 
choose Add Group By to add a Group By column to the grid. Then, if you 
want to subtotal by users, choose the UserName, Email, and ItemPrice 
columns from the Field List. Then set the Group By column to Sum for the 
ItemPrice field, as in Figure 12-64. 



Figure 12-64: 
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Group By 
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Sum 



EL 

SELECT UserName AS [User], Email AS [Email Address], SUM(ItemPrice) AS Subtotal 
FROM DetailedUsersitemsView 
GROUP BY UserName, Email 
ORDER BY UserName 



Notice in Figure 12-64 I also set the Alias column for each field. Whatever 
you type into the Alias column will appear at the top of the column in the 
Gridview control. The default aliases will be generic (Exprl, Expr2, and so 
forth), which isn't particularly meaningful information to someone viewing 
a page. So you wouldn't necessarily want those names appearing at the top 
of the Gridview control. The easy way to put more meaningful names at the 
top of a Gridview control is to just change those generic names to whatever 
names you want to put at the top of the Gridview. 

The square brackets you see in the figure around the [User] and [Email 
Address] names are only required when the column name might conflict with 
some other name. But you don't have to worry about that. After you type an 
alias name of your own choosing, the Query Builder will automatically add 
square brackets if (and only if) they're needed. 



You can click the Execute Query button near the bottom of the Query Builder 
window to test the query. The query results appear in the bottom pane of the 
window. 
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The above example assumes you want to see subtotals based on users. 
Suppose that you wanted to subtotal by Item rather than by Customer. 
k d use the Ourltemid, ItemName, and ItemPrice columns, with 
temPrice column set to Sum. Then enter meaningful aliases 
for the Gridview's column headings, as shown in Figure 12-65. 
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Ourltemid AS Item, ItemName AS Name, SUM(ItemPrice) AS Subtotal 
DetailedUsersltemsView 
P BY Ourltemid, ItemName 
? BY Ourltemid 



If you prefer to subtotal my month, rather than by customer or item, you'll 
need to use some custom expressions. In my example, the TransactionDate 
field contains the date of each transaction. You can use the following expres- 
sions to group by month number, month name, and year: 

i>* MONTH(TransactionDate): Isolates the month number of the 
TransactionDate field. This field is for sorting purposes only, so 
you can clear its Output check box to hide it in the query results. 
Set its Sort Type to Ascending. 

V MONTHNAME(TransactionDate): Isolates the month name from the 
TransactionDate. The Query Builder will change the syntax of this one 
slightly to read {fn monthnam (TransactionDate) }. But don't worry 
about that. It happens automatically if, and only if, the specific expres- 
sion you entered requires the modified syntax. You can just let it happen 
and not fret over it. 

YEAR(TransactionDate): Isolates the year of the TransactionDate. Set 
this item's Sort Type column to Ascending as well, so items are listed in 
month and year order. 

Figure 12-66 shows how you'd use the expressions in the grid portion of the 
query. Notice that I'm sorting by the month number and year, to get the 
records to be displayed in chronological order. As always, all fields except 
ItemPrice are set to Group By, since only ItemPrice needs to be totaled. 
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When you've finished defining the query, click OK in the Query Builder. Then 
click Next and Finish to return to the page. The only thing you'd really need 
to format in the Gridview control would be the ItemPrice field, which will 
show in that 29.9500 format if you don't set its Format to Currency. 

To format the ItemPrice column, choose Edit Columns from the Gridview's 
Common Tasks menu. Choose Subtotal from the Selected Fields box near the 
bottom of the dialog box. Then set that field's DataFormatString property 
to { 0 : C} as shown in the examples presented earlier in this chapter. While 
you're at it, click the + sign next to itemstyle in the Properties list, then set 
the HorizontalAlign property to Right to have number right-align within 
the column. Then click OK. 



In Design view, the page won't look like much, just the usual placeholders. 
Figure 12-67 shows an example. The Sales by Customer text at the top of the 
page is just text I typed right into the page. The Gridview is bound to the 
query shown back in Figure 12-64, which subtotals by user. The Formview 
control is the same as described at the start of this section. 




When viewed in a Web browser, though, the page shows total sales by user, 
with a grand total at the bottom, as shown in Figure 12-68. 

You could create three separate pages, one for each type of query, making it 
easy to view subtotals and totals by user, product, or month. 

It's important to understand that all of the examples you've seen in this 
chapter are just examples. There's almost no limit to the things you can do 
with the Gridview, DetailsView, DataList, and Formview data controls 
in Visual Web Developer. In this chapter, we've barely scratched the tip of the 
proverbial surface. But this should be enough to get you in the ball game, and 
to see how you can easily bind data controls to SQL server tables and views 
to extract whatever data you need to show on a Web page. 
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How easy, or how difficult, it all seems really depends on your perspective. 
Clearly, if you're already familiar with database concepts and SQL, things will 
seem easy because you can do so much without writing any code. If you're 
new to database management, you may want to invest some time boning up 
on database design basics and SQL to understand the full creative potential 
these controls offer. 
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#^ven if this book were 3,000 pages long, it still wouldn't be long enough to 
mm cover everything there is to know about Visual Web Developer, HTML, 
CSS, ASP.NET, and programming. You'll often need to refer to online resources 
or books for more information. 

Given that Visual Web Developer is a tool for software developers, you'll have 
to get accustomed to terminology that developers use. This chapter presents 
the top ten terms that everyone will assume you already know and understand. 



Familiar computer terms can change when they venture onto the World 
Wide Web. For instance, you may already know application as a program such 
as a word processor or spreadsheet, but the term Web application basically 
means a Web site or Web page that contains more than just static, unchang- 
ing HTML and text that looks the same to all visitors. A Web application is 
more dynamic than that; the page's exact content is created just before the 
page is sent. Exactly what the visitor sees depends on who that visitor is, or 
the specific information the user requested. 



There are two main types of computer users in the world, those who use 
software, and those who create software. The people who create software 
are called developers. Everyone else is called a user. 

It's a lot easier to be a user than a developer. As a user, you can often figure out 
how to do things just by guessing and hacking away until you get it right. Not so 
for a developer. You have to actually know how the technology works — as well as 
what you're doing with it — to create software. Guessing and hacking away at 
random generally leads to nothing but endless hours of hair-pulling frustration. 



Web 



Application 



De</eloper 
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ven Web site consists of Web pages whose content depends upon 
("is driven by") the data stored in a database. For example, when you search 
the Internet with a search engine such as Google, you're basically sending a 
query string to Google's database. What you get back is a dynamic page cre- 
ated in response to your query; exactly what appears on it depends on what 
you searched for. The page's specific content is "driven" (determined) by 
what's in Google's database that matches what you searched for. 



ASP.NET 2.0 



ASP stands for Active Server Pages, and is Microsoft's fundamental technol- 
ogy for building dynamic, data-driven Web sites. As with all technologies, ASP 
has evolved over the years to become ever more powerful and easy to use. 

As I write this book, ASP.NET 2.0 is the latest version of ASP. It's also the ver- 
sion of ASP used by Visual Web Developer to create dynamic data-driven Web 
sites. To publish a site you created with Visual Web Developer, you must find 
a hosting provider that supports ASP.NET 2.0. 



Visual Studio 

Visual Studio is Microsoft's main software-development tool. It has all kinds 
of functionality for creating all kinds of programs. It's big, complex, and easy 
to get lost in because Visual Studio provides a seemingly-endless array of 
tools and options. 

Even so, Visual Web Developer is (believe it or not) a greatly uncomplicated 
version of Visual Studio; it focuses on developing one type of application: 
dynamic, data-driven Web sites. In effect, Visual Web Developer just "hides" 
the parts of Visual Studio that aren't relevant to developing Web applications. 



IDE 

IDE acronym stands for Integrated Development Environment. Both Visual 
Studio and Visual Web Developer are IDEs. They're called integrated because 
they give you access to all the various tools and technologies you need to get 
the job done. 
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To create data-driven Web sites, for example, you need a pretty specific list of 
things: HTML, CSS, ASP.NET, a data source (such as SQL Server), and at least 
ramming language (such as C#). An IDE like Visual Web developer 
I those technologies together under one roof, so to speak, so you can 
get all your work done in one program window. (What a concept.) 



^jH-ST(/j^ You've seen a similar (but unrelated) term before: In hard drives, IDE stands 
for Integrated Device Electronics. But that concept is in no way related to 
software development. In hard drives, it just means that all the electronics 
the disk needs to operate are contained within the drive's case. 




Control 

When used as a noun within the context of programming, the term control 
refers to things in a program, or on a page, that allow users to control the 
action. For example, open any Windows dialog box and you see a bunch of 
text boxes, drop-down menus, check boxes, and buttons. All of these are rela- 
tively small, simple controls. 

In a more general sense, a control can be anything on the page that a user 
interacts with. In Visual Web Developer's Toolbox, each item actually repre- 
sents a control that you can drag and drop onto a page. As a developer, you 
choose which controls users will see, and can program what happens when a 
user interacts with a control. 

Code 

Code is the text that forms the instructions for the computer, written in some 
programming language such as C# or Visual Basic. It has a different function 
from text that's typed in a human language. Unlike regular text, code uses no 
sentences or paragraphs. Instead, code consists of statements (lines) written 
in the programming language rather than in a human language. Figure 13-1 
shows an example of some C# code. 

When you write in (say) English, you can get away with murder in terms of 
spelling and punctuation; even if the text would make your composition 
teacher cry, your human recipient will probably still be able to figure out 
what you mean — simply by studying the context of the message. (If you've 
spent any time in online forums, you've no doubt seen the extent to which 
people can get away with worse-than-iffy spelling and punctuation.) 
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1|3 using System; 

using System. Data; 
ging System. Configuration; 
ping System. Collections; 
ing System. Web; 
using System. Web . Secur ity; 
using System. Web . UI; 
S I using System. Web . UI . UebControls; 

using System. Web . UI . WebControls . WebParts; 
10 fusing System. Web . UI . HtmlContro Is; 
11 



System. Feb. UI. Page 



12 □ public partial class ChooseTheme 

^^^^^^^^^^^^^^^^^ 
// On pre-initialization apply user's preferred theme, 
protected void Page_PreInit (object sender, EventArgs e) 



lSfi 
I6j 
17| 
IB 
19 
20! 



{ 



if (Prof ile.PreferredTheme == null) 
{ Page. Theme = "Def aultTheme"; } 
else 

{ Page . Theme = Prof i le . Pref erredTheme; } 



// On first load, set ListBox value to Pref erredTheme value. 

protected void Page_Load (object sender, EventArgs e) 

{ 

if ( ! Pfjge . isPostBack) 

< 

ListBoxl.SelectedValue = Prof ile . Pref erredTheme; 

} 



When you write code, there is no such margin for error. Every character of 
every word counts; if it isn't just so, you'll likely get an error message rather 
than code that works. Unlike a human being who can figure out (at least) the 
intent of some dreadfully composed written message, a computer can't 
"figure out" diddley squat. You either write the code correctly and it works, 
or you write it incorrectly and it doesn't work. 



Programmatic 

There are two ways to interact with controls. One way is manual: You actually 
use the finished control yourself. For example, when you click a button in a 
Windows dialog box, you are manually operating the control with your mouse 
and keyboard. 

As a programmer, you can also write code to specify the exact appearance 
and behavior of a control, as well as what happens after a user interacts with 
the control. That sort of code is generally executed in response to some 
event, as when the user clicks a button or makes a selection from a drop- 
down menu. 
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In essence, a user who is viewing a page and makes a selection from the 
options provided is manually using the control. But exactly what happens 

user makes a selection is generally handled programmatically — the 
ns some code you've written, and that code tells the machine 
exactly what to do. 



Database 

The term database is often used casually to refer to any body of knowledge or 
collection of information. In programming terms, it's more specific — refer- 
ring to data that's organized into tables that consist of columns and rows so 
it can be stored and accessed consistently. The database for a Web site is 
made available through the Database Explorer tab in Visual Web Developer, 
as shown in Figure 13-2. 

A database management system (DBMS) is a program that allows you to orga- 
nize data into tables, and retrieve data programmatically. Microsoft Access 
and SQL Server are examples of database-management systems. Microsoft 
Access is a self-contained DBMS; it contains all the tools you need to create 
tables, queries, forms, reports, and other aspects of an application — in one 
program. 
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SQL Server isn't so much an application as it is a server — a single-minded 
program obsessed with serving up data. Unlike an application program, 

s its own program window, a server works behind the scenes; it has 
ular interface or program window of its own. Instead, the server just 
serves up" data to some external application — such as (for a convenient 
example) a dynamic data-driven Web site you create in Visual Web Developer. 
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■ yisual Web Developer brings together all the technologies you need to 

create dynamic, data-driven Web sites. Those technologies include 
HTML, CSS, ASP.NET, C#, the .NET Framework, and SQL Server — each and 
every one of which is an enormous topic in itself. (For example, the first 
printed documentation for the .NET Framework alone consisted of over 8,000 
pages, bound into several volumes.) 

To deal with such a gigantic body of knowledge, you must find ways to get 
exactly the information you need, when you need it. Sending desperate 
"PLEASE HELP!!!!" messages generally won't cut it. You have to be more 
resourceful — and know where the people you're asking are getting their 
information, so you can go get that information too. 

The sites listed in this chapter get you in the ballpark. Of course, Web sites 
being what they are, some of the URLs listed here may change between now 
and the time you actually read this. That's why I keep an up-to-date list of 
links on www. coolnerds . com/vwd just in case any change occurs. If you 
have any problems finding a page, try looking there. 



Microsoft betfeioper Me Work (MSOM) 

The Microsoft Developer Network at http : //msdn .microsoft . com is home 
to all Microsoft software-development tools and technologies. This is where 
the hardcore computer geeks go to get information about Microsoft devel- 
oper products. 



HTML Home Paqe 

All Web pages are formatted using HyperText Markup Language (HTML). The 
W3C (Word Wide Web Consortium) is the "official" site for all things HTML 
(including that useful new mutant, XHTML). To go straight to documentation 
on HTML or XHTML, use the link www. w3 . org/Markup/. 
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Cascading Stifle Sheets Home Page 



yspV^S Style Sheets (CSS) are a must if you intend to give your Web site a 
consistent look and feel. They're even more indispensable if you intend to 
use themes, because every theme includes some CSS. The home page for CSS 

is at www . w3 . org/Style/CSS/. 



XML (extensible Markup Language) is a standardized means of transmitting 
raw data across the Internet via the Word Wide Web. (By "raw" I mean unfor- 
matted, like the data in a database — useful even if it isn't pretty to look at.) 

Whether your site needs (or can even use) XML depends on many factors. 
In Visual Web Developer, you may be able to get by with little or no XML at 
all — that depends on your site. If you do need XML info, the official site at 
www.w3 . org/XML/ contains all the specs. 



If I was forced to pin down my choice for the main technology behind Visual 
Web Developer, ASP.NET 2.0 would be the one I'd choose. Although there are 
plenty of Web sites that address this topic, the most "official" would have to 
be the one whose URL is also the easiest in the world to remember: 

http://ASP.NET. 



Clicking the Starter Kits tab at the ASP.NET Web site takes you to a page of 
sample Web applications that you can download for free. There are different 
kinds of Starter Kits for different types of Web sites. If you have a particular 
type of site in mind, but don't quite know how to organize things, a Starter Kit 
could be a great way to get started. 




XML 



Home Page 



ASP.NET 



ASP.NET Starter Kits 
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ET Forums at http : / / forums . asp . net give you a handy place to 
go for questions and answers. There are a lot of discussions to choose from. 
You may have to scroll down to find Visual Web Developer and related discus- 
sions. You can discover a lot about what the technology can do just by read- 
ing through some of the questions and answers that have already been 
posted. 



SQL Server beVeioper Center 

The subtitle to this Web page, "Enabling a world of data-driven applications," 
is what SQL Server is all about. In a Visual Web Developer site, SQL Server 
contains all the data that drives the Web site. As I write this, the URL for SQL 
Server 2005 is http: //msdn. microsoft.com/SQL/2005. If that doesn't 
work, try the more general URL http : / /msdn. microsoft . com/ SQL. 



dotnetjunkies 

The Microsoft .NET Framework is a huge collection of pre-written software 
that most modern programmers use to create modern programs. In fact, all 
the Using statements you see at the top of a code-behind page in VWD are ref- 
erences to namespaces within the .NET Framework. Each namespace is like a 
folder containing usable code organized into classes. 

The dotnetjunkies site (at www. dotnetjunkies . com) is a place for people 
who are into the whole .NET way of doing things. Though it spans the whole 
of .NET Framework development tools, there's always info on ASRNET 2.0 
and Visual Web Developer. 



Microsoft Technical Communities 

This site encompasses all of Microsoft's software-development tools — and 
discusses them in blogs, technical chats, newsgroups, webcasts, communi- 
ties, user groups, and forums. There are all sorts of ways to interact with 
other people who use the same tools you're using. The URL for this site is 

www. microsoft . com/communities. 
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In This Appendix 

Choosing a hosting provider 
Preparing to upload 
Uploading to the Web server 




■yl /hen all your site's Web pages are working properly, you're ready to 
ww upload your site to a hosting provider — a company that can host 
your Web site in a way that allows anybody with an Internet connection to 
view your site. 

When you've chosen a hosting provider, exactly how you upload pages to 
the site will depend on the provider you chose. There is no simple one-rule- 
fits-all technique that I can give you. Only your provider can give you specific 
details on what's needed. But I can tell you, in general, what the process is 
all about. 



There are tons of companies out there who will be more than happy to host 
your Visual Web Developer Web site — for a fee, of course. (You may be able 
to get a few months free as a trial period, but that's normally temporary.) The 
ASP.Net Web site (www. asp .net) provides links to many companies that offer 
that service. 

When you're shopping for a hosting provider, you'll come across a ton of 
options to choose from. Your goal is to find a service that specifically sup- 
ports Visual Web Developer and SQL Server. 

You'll need a domain name, too. That domain name, preceded by http : / /www, 
becomes your site's URL. For example, if you get the domain name Dunce 
School . com, then people will have to type www. DunceSchool . com into their 
browser's Address bar to visit your site. 



Choosing a Hosting Provider 
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You can set up your account and get a domain name at the same time. But 
there is no guarantee that the domain name you want is available. You might 
ry several domain names before you find one that's available. You 
by going to any site that offers help with selecting domain names 
(such as www.NetworkSolutions . com). 




After you have selected a domain name and a hosting provider, you'll have 
the information needed to publish your site. For the sake of example, let's say 
you set up an account with the following choices: 

f" Domain Name: DunceSchool . com 
t-«* UserName: YourUserName 
Password: YourPassword 

Don't forget your own Web site's domain name, username, and password. 
Print or jot down that information as soon as you get it. When you have a 
place to post your site, you also have two locations for the site: 

Local: The copy of the site that's on your computer, and has been since 
Day One. 

*<" Remote: The copy of the site on the Web server that the rest of the 
world can browse to. 

To make your site visible to the world at large, you copy it from your local 
PC to the remote Web server. If you edit, refurbish, or otherwise tweak your 
site, the place to do that is your local PC. Then you can upload the revised 
version. 



Preparing \lour Site for Uploading 

Once you have a place to upload your site, your ISP can fill you in on any 
specific tasks that have to be done prior to uploading. It's a good bet you'll 
want to turn off debugging and tracing in your site's web . conf ig file before 
uploading (more about why in a moment). To do that, follow these steps: 

1. Choose Website O ASP.NET Configuration from the menu bar. 

2. In the Web Site Administration Tool, click Application Configuration. 

The options shown in Figure A-l appear. 
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Figure A-1: 

Application 
Configura- 
tion in the 
Web Site 
Administra- 
tion Tool. 



Application 



I page to configure your application with values that you do not want to hard-code into your 
pages, enable your application to send e-mail, configure debugging, set up a default error page, and stop 
or start your application. 



Application Settings 



SMTP Settings 



Existing application settings: 0 Configure SMTP e-mail settings 

Create application settings 
Manage application settings 



Application Status 



Application is: Online 
Take application offline 



Debugging and Tracing 



Cnntlgure debugging and 
tracing 

Define default error page 



On a Web server, you generally don't want debugging and tracing enabled 
because those things eat up resources. The drain is trivial and unimportant 
on your local PC, but on a Web server — where the system is likely to be 
much busier — the effect of that resource consumption is magnified greatly. 

So before you upload, click the Configure debugging and tracing link. Then 
clear the Enable Debugging and Capture Tracing Information check boxes, 
as shown in Figure A-2. 



Figure A-2: 

Turning off 
debugging 
and tracing. 
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Configure the settings for debugging and tracing your application. 






□ Enable debugging 






□ Capture tracing information 
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Remember, I'm just showing you examples here, not specific instructions for 
your hosting provider. Only your hosting provider can give you specific 
^yjt^u^ons to configure your site for the services they provide. 

If your site will send e-mail automatically, you also need to configure SMTP 
e-mail settings, using the link by that same name shown in Figure A-l). Again, 
only your hosting provider can tell you exactly how to configure your SMTP 
settings. 



Copying the Site 



After you have the above ducks all in a row, you're ready to copy your site to 
the hosting provider's server. You start by opening your Web site in Visual 
Web Developer, of course. Exactly how you do that will vary from one hosting 
provider to the next. But here are the general steps using FTP to upload 
pages: 

1. Choose Web Site O Copy Web Site from the menu bar. 

2. Click the Connect button near the top of the page that opens. 

3. In the left column, click FTP Site. 

4. Type the FTP URL — exactly as provided by your ISP — into the 
Server box. 

5. Deselect the Passive Mode and Anonymous Login check boxes. 

6. Type your user name and password into the appropriate boxes, as 
shown in Figure A-3, and click Open. 



Figure A-3: 

Turn off 
debugging 
and tracing. 
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File System 



DunceSchool.com 
Port: 



Directory: 



□ Passive Mode 

O Anonymous Login 
Username: 
YourUserName 
Password: 



j\ Passwords are sent across the network in plaintext (unencrypted text), making 
them vdneidble to interception, 



| Open j | Cancel 
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When you're connected, the left pane shows your local site's files; the right 
pane shows the remote site's files. Initially, the remote site is empty. At this 
u simply want to copy all the files from your local site to the remote 
can do so by clicking the button with the two-headed arrow between 
the two panes. Then you wait. 



When all the files have been copied, the two columns will look the same, 
because the remote site contains all the same folders and files as the local 
site. To test the remote site, close Visual Web Developer. Then browse to the 
site's URL, just as if you were any user who wanted to visit the site. 

If there's a problem with the remote site, chances are it's something you have 
to fix at that end — using a Control Panel or something similar on the remote 
site to do that final tweaking. But exactly what final tweaking is required is 
(you guessed it) information you can get only from your service provider. 

Given that your local site — the one that lives on your PC — is the best place 
to tweak, you may want to re-enable debugging and tracing in that site only. 
Now, because that change will be stored in the site's web . conf ig file, you 
must remember not to upload that file to the remote site. In the Copy Files 
text box, the discrepancy between the local-site and remote-site Web . conf ig 
files will show up as a pair of question marks, as shown in Figure A-4. 



Figure A-4: 

The local 
and remote 
Web.config 
files don't 
match — 
but that may 
be okay. 
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Don't presume that question marks mean "You must upload this file right 
now." The question marks simply mean that the two files are different. But in 
this case, you may very well want the two web . conf ig files to be different 
because the sites are on two different computers, requiring two different con- 
figuration files. Any other changes you make to your site, however, should be 
uploaded to the remote site as needed. Those changes show up as a blue 
arrow. 
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If you use the two-headed arrow box to copy all the pages from your local 
site to the remote computer in that case, you end up copying the local 

if ig file too. To play it safe, select only the files you do want to copy, 
: the right-pointing arrow button, as shown in Figure A-5, to copy 
just the modified pages without copying the modified web . conf ig file. 
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In a nutshell, that's how uploading pages to a Web server works in Visual Web 
Developer Express. In the non-Express version of the product, you also have 
the option to publish the site. The main difference between the two processes 
is that when you publish, you must first create a set of executable files, and 
then copy those files to the server. 




rhis book includes two CD-ROMs. The first disc contains Visual Web 
Developer 2005 Express Edition software. The second disc contains sup- 
plemental material for Visual Basic 2005 Express and Visual Web Developer 
2005 Express. The full contents of this second disc are discussed in the sec- 
tions that follow. 



Visual Basic 2005 Express 

V Videos: Absolute Beginner's Guide to Visual Basic Express 

This video series is designed specifically for individuals who are inter- 
ested in learning the basics of how to create applications using Visual 
Basic 2005 Express Edition. This includes over 8 hours of video-based 
instruction that walks from creating your first "Hello World" application 
to a fully functioning RSS Reader application. Learn how to write your 
first application today. 

For more information on software development with Visual Basic Express 
Edition, you may be interested in these Supplemental Readings. (They 
require Adobe Acrobat Reader.) 

Includes all 16 lessons with 17 videos and 12 downloads. 

W Starter Kits: Starter Kits are enhanced project templates that can be 
shared with other members of the community. Here are some starter 
kits for Visual Basic. 

• Card Game Starter Kit: This Starter Kit is a complete Black Jack card 
game. The starter kit contains an extensible framework for building 
card games and a Black Jack game application that is built on top of 
this framework. The project comes ready to compile and run, but 
it's easy to customize with only a little extra programming. The sec- 
tion Expanding the Card Game contains a list of some customiza- 
tions you might make. You are also free to use the source code as 
the basis for your own card game projects, and share your work 
with others or upload it to the Internet. 

• Amazon-Enabled Movie Collection Starter Kit (link): The Amazon- 
Enabled Movie Collection Starter Kit is a Windows Form application 
that uses Amazon. corn's Web services to dynamically search for 
movie titles. This Starter Kit demonstrates technologies such as: 
calling XML Web services, databinding, application settings, local 
data storage using SQL Server 2005 Express Edition, and more. 
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f Additional Resources: Here are additional resources on the Web. Most of 
these links will be updated in the future, so you may want to occasionally 
k them for updated information and resources. 

Visual Basic Express Edition Home Page: This page on the Microsoft 
Web site provides additional information and links for Visual Basic 
Express. 

• Visual Basic Developer Center: Visit the Microsoft Visual Basic 
Developer Center. Here you will find the most recent information 
on Visual Basic. 

• Visual Basic Forums: Read and place postings on the many 
ASP.NET forums. 

• SQL Server Query Basics: Learn to use the powerful T-SQL language 
and see how easy and flexible it is for retrieving information stored 
in SQL Server. This article introduces you to T-SQL and its robust 
query syntax that makes it easy for you to use SQL Server Express 
for your data-driven applications. 



Visual Web betieloper 2005 Express 

Videos: Learn Visual Web Developer Series 

This video series is designed specifically for individuals who are interested 
in learning the basics of how to create dynamic Web applications using 
ASP.NET 2.0 and Visual Web Developer 2005 Express Edition in either 
Visual Basic or C#. 

Includes all 14 lessons with 14 videos and 14 downloads for Visual Basic 

Includes all 14 lessons with 14 videos and 14 downloads for C# 

Videos: Videos by Jeff Prosise of Wintellect (Links to MS Web Site) 

This series of video presentations by Jeff Prosise of Wintellect introduces 
you to many of the new features of ASP.NET 2.0, such as: 

• Web Forms: Web forms are the atoms from which ASP.NET Web pages 
are built. This module introduces the Web forms programming model 
and acquaints developers with some of the Web controls featured 
in ASP.NET. 

• State Management: ASP.NET 2.0 provides a variety of mechanisms 
for building stateful Web applications. This module introduces 
them all: view state, application cache, session state, profiles, and 
cookies. 
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Security: Learn the essentials of ASP.NET security with an empha- 
sis on forms authentication, the membership and role management 
services, and login controls. 

Master Pages and Site Navigation: Get an introduction to master 
pages, which are templates that provide content to other pages, 
and to the data-driven site navigation tools featured in ASP.NET 2.0. 

Data Access: New controls in ASP.NET 2.0 enable developers 
to build sophisticated, data-driven Web pages with little or no 
code. This module introduces developers to data-driven content, 
ASPNET-style. 

Application Infrastructure: Pages alone do not a Web site make. 
This module introduces other essential elements of ASP.NET 
applications, including Web.config, Global. asax, components, 
and resources. 

Starter Kits: The ASP.NET 2.0 Starter Kits for Visual Web Developer are 
fully functional sample applications to help you learn ASP.NET 2.0. Each 
sample is complete and well-documented so that you can use the code 
to kick start your Web projects today. 

• Club Site Starter Kit (link): This starter kit provides a starting point 
for creating a Web site for your club or organization. The kit includes 
news posting, calendaring, member directory, and photo album 
systems. 

• Time Tracker Starter Kit (link): This is a business Web application 
for keeping track of hours spent on a project, with the ability to 
handle multiple resources as well as multiple projects. 

Additional Resources: Here are additional resources on the Web. Most of 
these links will be updated in the future, so you may want to occasionally 
check them for updated information and resources. 

• Visual Web Developer 2005 Express Edition Guided Tour: Learn 
about the key new features available in Visual Web Developer 2005 
Express that will make Web development easier and more produc- 
tive than ever before. 

• ASP.NET 2.0 QuickStart Tutorial: The ASP.NET QuickStart is a series 
of ASP.NET samples and supporting commentary designed to quickly 
acquaint you with the syntax, architecture, and power of the 
ASP.NET Web programming framework. The QuickStart samples are 
designed to be short, easy-to-understand illustrations of ASP.NET 
features. By the time you finish reading this tutorial, you will be 
familiar with the broad range of the new features in ASP.NET 2.0, 

as well as the features that were supported in earlier versions. 
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• ASP.NET: Visit Microsoft's Web site for the latest information 
on ASP.NET. 
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ASP.NET Developer Center: The Official Microsoft Developer Center 
for ASP.NET 



• Visual Web Developer 2005 Express Edition Home Page: This page 
on the Microsoft Web site provides additional information and links 
for Visual Web Developer Express. 

• ASP.NET Forums: Read and place postings on the manyASP.NET 
forums. 

• SQL Server Query Basics: Learn to use the powerful T-SQL language 
and see how easy and flexible it is for retrieving information stored 
in SQL Server. This article introduces you to T-SQL and its robust 
query syntax that makes it easy for you to use SQL Server Express 
for your data-driven applications. 
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: (colon) character, declarations, 99 
{ and } (curly braces) characters, CSS 

style elements, 99 
. (period) character, class indicator, 103 
; (semicolon) character, declarations, 99 
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absolute positioning 
enabling, 193 

object alignments, 195-196 
Z-indexes, 194-195 
access rules, membership sites, 45-48 
Active Server Pages (ASP), 

described, 322 
Add New Item dialog box 
adding style sheets to a theme, 
202-203 

CSS style sheet creation, 100-101 

new blank page creation, 76 

site map addition, 158 

Web form addition, 176 

Web Form creation, 205 

Web User Control addition, 166-167 
Add New Style Rule dialog box, class 

rule creation, 103 
Add ORDER BY Clause dialog box, data- 
bound control sorts, 267-268 
Add Style Rule dialog box 

CSS class selector creation, 103 

CSS style rule creation, 102 
Add Table dialog box, view creation, 249 
Add WHERE Clause dialog box, data- 
bound control query filters, 270 



alignments 

absolutely-positioned objects, 195-196 

HTML table cell text, 82 
anonymous users 

membership site visits, 39-40 

security trimming, 161-162 
App_Data folder, default database 

storage, 22 
App_Themes folder 

subfolders, 200-201 

theme storage, 199-200 
applications, described, 321 
ASP (Active Server Pages), 

described, 322 
ASP.NET. See also controls 

ChangePassword control, 145-146 

control/template conversion, 128-129 

forums, 329 

Login controls, 130-131 
login links, 136-141 
Login.aspx page creation, 135-136 
Login Name control, 138 
LoginStatus control, 137-138 
Logi nVi ew control, 138-141 
membership testing, 146-148 
Microsoft .NET Framework integration, 

123, 135 
password constraints, 149-151 
PasswordRecovery control, 141-144 
server control addition, 125-130 
specifications, 328 
Starter Kits, 328 
template editing, 129-130 
user account creation, 131-135 
viewing server controls in Source view, 

148-149 
workflow process, 123-124 
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ASP.NET 2.0 Hosters, publishing to the 
.Web, 19 

ribed, 322 

;fc4a*M/*t*)I1\lOable, profile property 

storage, 187 
ASPNETDB . MDF database, Solution 

Explorer display, 51-52 
attributes, Source view entry 

conventions, 93-95 
authentication 
Forms authentication, 42-43 
membership sites, 42-43 
user profiles, 171-175 
validation controls, 188-192 
Windows authentication, 42-43 
Auto Format, server controls, 127 



background colors 
cells, 82 

Master Pages, 57-58 
backgrounds, styling, 107-108 
binary data type, SQL Server, 228 
binding 

Detai 1 sVi ew control, 287-290 
DropDownLi st control, 280-287 
navigation controls, 163-164 

b i t data type, SQL Server, 232 

blank pages, creating, 75-77 

bookmarks 
creating, 86 
links, 86-87 

Boolean data type, SQL Server, 
228, 232 

borders 
cells, 59-60 

HTML table cells, 82-83 
pictures, 89-91 
styling, 113-114 
boxes, styling, 113-114 



browsers 

compatibility issues, 17-19 

viewing Web pages, 65-66 

Web page viewing, 35-36 
Button control, adding to a Web form, 
178-179 

buttons, adding to a Web form, 178-179 



C# language, supported programming 

language, 21 
captions, picture, 307-308 
Cascading Style Sheets (CSS). See also 
styles; style sheets 

class selectors, 102-104, 117-119 

declaration component, 99-100 

described, 97-100 

DIV styles, 120-121 

element class selectors, 119-120 

element selectors, 116-117 

element styles, 101-102 

HTML interaction, 97-100 

saving style sheets, 115 

selector component, 99-100 

specifications, 328 

Style Builder editing, 57, 104-115 

style rules, 101-104 

style sheet creation, 100-101 

style sheet links, 115-116 

theme element, 201-204 

toolbar viewing, 100-101 

W3C specifications, 122 
cell borders, Master Pages, 59-60 
cells 

background, 82 

borders, 82-83 

control addition, 84 

deleting, 79 

height/width settings, 58-59 
HTML table insertion, 79 
HTML table merges, 80-81 
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HTML table selections, 80 
resizing, 79 

D rooftops 

table data entry, 78 
text alignments, 82 
text formatting, 82 

ChangePassword control, ASP.NET, 
145-146 

ChangePassword, Login control, 131 
char data type, SQL Server, 230 
character data, text data type, 228-230 
class indicator, period (.), 103 
class selectors 

CSS (Cascading Style Sheets), 102-104 

Web page application, 117-118 
code-behind files 

tying code to an event, 180-183 

viewing, 33-34 
codes 

conventions used in book, 3 
described, 323-324 
elements, 323-324 

colon (:) character, declarations, 99 

colors 
background, 57-58 
background styling, 107-108 
cell background, 82 

columns 
adding to HTML tables, 79 
data-bound control retrieval, 265-267 
Data Li st control picture display, 
305-306 

Data Li st control text display, 301-302 
date/time number formatting, 274-275 
deleting, 79 

grid arrangements, 279-280 
hiding/displaying in grids 279-280 
selections, 79-80 

SQL Server table element, 222-223 
Common Tasks menu, server controls, 
127-130 



Compa reVal i da tor control, text box 
value comparison, 191-192 

compatibility, Web browser settings, 
17-19 

components, book sections, 4 
composite formatting, date/time number 

formatting, 274-275 
connections, data-bound controls, 

262-264 
content pages, creating, 65 
ContentPl aceHol der pane, Master 

Pages, 55-56, 61-63 
contents 
adding to Master Pages, 67-68 
Help system element, 15 
controls. See also ASP.NET; Login 
controls;, server controls 
absolute positioning, 193-198 
adding to Master Pages, 68 
data binding methods, 262-274 
described, 323 
grid display, 276-280 
HTML table cell addition, 84 
login links, 136-141 
programmatic interaction method, 
324-325 

programmatic name assignment, 177 

server, 125-130 

site-navigation, 154-158 

skin files, 201, 204-209 

static versus dynamic data, 155 

template conversion, 128-129 

template editing, 129-130 

theme selection, 212-213 
conventions, used in book, 3 
CreateUserWi za rd, Login control, 
131-135 

CSS (Cascading Style Sheets). See also 
styles; style sheets 
class selectors, 102-104, 117-119 
curly braces ({ and }) characters, 99 
declaration component, 99-100 
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CSS (continued) 

described, 97-100 

SiQiOlM^tors, 119-120 
element selectors, 116-117 
element styles, 101-102 
HTML interaction, 97-100 
saving style sheets, 115 
selector component, 99-100 
specifications, 328 
Style Builder editing, 57, 104-115 
style rules, 101-104 
style sheet creation, 100-101 
style sheet links, 115-116 
theme element, 201-204 
toolbar viewing, 100-101 
W3C specifications, 122 
CSS Editor, style sheet display, 
100-101 

curly braces { and } characters, 

CSS style elements, 99 
CustomVal i da tor control, form 

validation, 192 

•D • 

data, binding to controls, 262-274 
Data Configuration Wizard 

binding data to a control, 262-273 

column retrieval, 265-267 

connection selections, 262-264 

data source selections, 262-264 

filtering, 269-273 

query filters, 269-273 

Select Statement configuration, 264 

sort order settings, 267-268 

table selections, 265 

unique value display, 268-269 

view selections, 265 
data sources, data-bound controls, 
262-264 



data types 
binary, 228 

bit, 232 

Boolean, 228, 232 
char, 230 
date/time, 228, 232 
datetime, 232 
decimal , 231 
fl oat, 231 
i nt, 231 
money, 231 
nchar, 230 
number, 228, 230-232 
numeri c, 231 
nvarchar (MAX), 230 
nva rcha r, 230 

other (specialized), 228, 232-233 
real, 231 

smal 1 datetime, 232 

smal 1 money, 231 

SQL Server, 227-233 

table definitions, 227-228 

text, 228-230 

theme information, 201 

tinyint, 231 

user profiles, 172-175 

varchar (MAX), 230 

va rcha r, 230 
Database Explorer 

table creation, 236-237 

user interface element, 1 1 

view creation, 249 

viewing existing tables, 222-223 

viewing table definitions, 227-228 
database management system (DBMS), 

described, 325-326 
databases 

ASPNETDB . MDF, 51-52 

data-bound control data sources, 
262-264 

described, 325-326 
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Drop 



drop-down list data binding, 280-287 
257-259 

Itionships, 223-227 




one-to-many relationships, 223-227 
picture table, 254-257 
primary key field, 237-238, 241-244 
SQL Server storage advantages, 221 
SQL Server table elements, 222-223 
table data entry, 244-246 
table links, 247-254 
text fields, 238-240 
Transact!' ons table, 241-244 
user access prevention techniques, 
275-276 
data-driven, described, 1, 322 
Data Li st control, normal text data 

display, 296-312 
date/time columns, date/number 

formatting, 274-275 
date/time data type, SQL Server, 228, 232 
dates 

Data Li st control formatting, 300-301 

formatting, 274-275 

Gr i dVi ew control formatting, 279 

uniqueidentifier, 232-233 
dateti me data type, SQL Server, 232 
DBMS (database management system), 

described, 325-326 
debugging, HTML in Source view, 95-96 
decimal data type, SQL Server, 231 
declarations 

colon (:) character, 99 

CSS component, 99-100 

semicolon (;) character, 99 
Defaul t. aspx, default Web page, 22-23 
Design Surface 

How Do I page display, 15 

page editing techniques, 26-31 

saving changes before closing, 32-33 

title creation, 34-35 



user interface element, 10-11 
viewing code-behind files, 33-34 

Design view 
absolute positioning, 193-194 
Common Tasks menu, 127-130 
data-bound controls, 273-274 
LoginStatus control display, 140 
moving objects, 56 
server control editing, 126-127 
switching to Source view, 23, 30-31 
Web page display, 23 

Detai 1 sVi ew control 
data display/editing, 287-290 
Master-Details forms, 294-295 

developers, described, 321 

directory See folders 

DIV styles, Web page application, 
120-121 

domain name, Web publishing 
requirement, 331-332 

dotnetjunkies, online resource, 329 

drop-down lists, data binding, 280-287 

DropDownList control 
drop-down list binding, 280-287 
Master-Details forms, 292-293 

dynamic data, navigation control 
support, 155 

Dynamic Help pane, Help system 
element, 15-16 

dynamic, described, 1 



element class selectors, Web page 

application, 119-120 
element selectors, Web page application, 

116-117 

element styles, CSS (Cascading Style 

Sheets), 101-102 
e-mail addresses, PasswordRecovery 

control element, 142-143 
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Error List pane, debugging HTML, 95-96 
extensible Markup Language (XML), 
328 

ling to a Web page, 

164-165 



e xte nsible Markup La 



false/true values, Boolean data type, 
228, 232 

favorites, Help system element, 15 
fields 

foreign keys, 241 

money, 240 

primary key, 237-238, 241-244 

Requi redFi el dVal i dator control, 
189-190 

SQL Server table element, 222-223 
table data entry, 244-246 
text, 238-240 
files 

ASPNETDB . MDF, 51-52 
code-behind, 33-34 
copying to a folder, 25-26 
copying/pasting to a folder, 26 
dragging/dropping to a folder, 25-26 
Logi n . aspx, 135-136 
RecoverPassword . aspx, 144 
skin, 201, 204-209 
Web . conf i g, 51-52, 150-151, 162, 

173-175 
Web. sitemap, 158-164 
filters 

data-bound control query, 269-273 

DropDownLi st control, 282-284 
float data type, SQL Server, 231 
floating-point numbers, scalar value 

type, 230-231 
folders 

App_Data, 22 

App_T hemes, 199-200 

copying files to, 25-26 



creating, 24-25 

database access prevention 

techniques, 275-276 
deleting, 26 

dragging/dropping files to, 25-26 

hiding/showing contents, 26 

Master Pages, 54 

members-only content, 39-40 

renaming, 24, 26 

Theme, 199-201 
Font Picker, font selections, 106 
fonts 

sizing, 106-107 

styling, 105-107 
footers, Master Page layout, 53 
foreign keys, SQL Server tables, 241 
formatting, text, 27-28 
forms. See also Web forms 

absolutely-positioned objects, 193-198 

custom validation controls, 192 

failed validation summary, 192 

Master-Details page, 291-296 

regular expression validation control, 
190-191 

required field validation control, 
189-190 

text box validation control, 189-190 
text box value comparison, 191-192 
user profile information entry, 176-188 
validation controls, 188-192 
value entry validation control, 190 
Forms authentication, membership sites, 
42-43 

FormVi ew control, record data display, 

312-318 
forums, ASP.NET, 329 



G 



Globally Unique Identifier (GUID), SQL 

Server, 232-234 
Google, search engine workflow process, 

123-124 
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grids, G r i d V i ew control, 276-280 
G r i d V i ew control 

:80 

s, 293-294 
subtotal display, 314-318 



v i ew control 

OBfcw,bf(«8C 



headers, Master Page layout, 53 
Help on Help pane, Help system 

element, 15 
Help system, user interface element, 

14-16 

Help toolbar, user interface element, 
14-15 

home page, described, 327 

horizontal rules, Web page addition, 92 

hosting providers 

uploading sites to, 334-336 

Web publishing, 19, 331-332 

Web publishing preparations, 332-334 
How Do I page, Design Surface display, 15 
HTML pages 

CSS interaction, 97-100 

debugging in Source view, 95-96 

home page, 327 

uses, 75 
HTML tables 

adding to a page, 77-78 

cell data entry, 78 

cell insertion/deletion, 79 

cell merges, 80-81 

cell selections, 80 

cell styling, 81-83 

column addition/deletion, 79 

control addition, 84 

deleting, 79 

resizing cells, 79 

row addition/deletion, 79 

row/column selections, 79-80 
Hyper Li nk control, picture captions, 
307-308 



Hyperlink dialog box, converting text 

selections to a hyperlink, 85 
hyperlinks. See also links 

adding to a Web page, 84-87 

Data Li st control display, 309-312 

quick links, 85-86 

SQL Server table, 257-259 



icons, used in book, 5 

IDE (Integrated Development 

Environment), described, 322-323 
Image control 

picture captions, 307-308 

sizing pictures, 305 
index, Help system element, 15 
inline elements, styling, 108 
Insert Table dialog box, adding HTML 

tables to a page, 77-78 
1 nt data type, SQL Server, 231 
integers, scalar value type, 230-231 
Integrated Development Environment 

(IDE), described, 322-323 
IntelliSense menu 

ignoring, 31 

selections, 31-32 
Internet, Forms authentication, 42-43 



J# language, supported programming 
language, 21 



• L • 



Label control, creating, 194 
layouts 

Master Pages, 53, 55-56 

styling, 112-113 

template selections, 55-56 
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lines (statements), code element, 
323-324 

e'^^tr*£* ition ' 92 
WVjJl\>A> links 

ASP.NET login, 136-141 

bookmarks, 86-87 

hyperlinks table, 257-259 

picture captions, 307-308 

picture table, 254-257 

RecoverPassword.aspx page, 144 

SQL Server tables, 247-254 

style sheets, 115-116 
list boxes, theme selections, 212-213 
Li st Box control, theme selections, 
212-213 

Listltem Collection Editor, theme list box 

selections, 213 
local networks, Windows authentication, 

42-43 

Logi n, Login control, 130 
Login controls. See also controls 

adding to a Web page, 130-131 

types, 130-131 
login links, ASP.NET, 136-141 
Logi n . aspx page, creating, 135-136 
Logi n Name control, ASP.NET, 138 
Logi nName, Login control, 131 
LoginStatus control 

ASP.NET, 137-138 

Design view display, 140 
Logi nVi ew control, ASP.NET, 130, 
138-141 

• M • 

many-to-many relationships, SQL Server, 

223-227 
margins, styling, 113 
Master Pages. See also Web pages 

adding to existing Web pages, 69-71 

background color, 57-58 

cell borders, 59-60 



cell height/width settings, 58-59 
content addition, 67-68 
content pages, 65 

ContentPl aceHol der pane styling, 

55-56, 61-63 
creating, 54-55 
editing techniques, 66-69 
folder creation, 54 
layouts, 53, 55-56 
left pane styling, 60-61 
LoginStatus control, 137-138 
Logi nVi ew control addition, 139-140 
moving objects, 56 
panes, 55-56 

picture display troubleshooting, 71 

Style Builder, 57-63 

style sheet links, 115-116 

template selections, 55-56 

text alignments, 58 

theme application, 217-218 

Toolbox control addition, 68 

Web forms, 63-66 
Master-Details forms 

Detai 1 sVi ew control, 294-295 

DropDownLi st control, 292-293 

Gri dVi ew control, 293-294 

transaction editing uses, 291-292 
membership sites 

access rules, 45-48 

active versus inactive user accounts, 49 
ASPNETDB.MDF database, 51-52 
authentications, 42-43 
GUID (Globally Unique Identifier), 
232-234 

members-only content folders, 39-40 

preferred theme storage, 213-214 

roles (people categorizes), 43-45 

security trimming, 161-162 

SQL Server connection testing, 41-42 

testing in ASP.NET, 146-148 

theme page display/selections, 211-212 

theme selections, 210-216 
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user accounts, 39-40, 48-51 
view ing existing tables, 222-223 

linistration Tool), 



DropEtoete 



Web . conf i g file, 51-52 
members-only content, folder creation, 
39-40 

Menu control, site-navigation, 154-158 
Menu Item Editor dialog box, navigation 

control addition, 156-158 
merges, HTML table cells, 80-81 
Microsoft .NET Framework, ASP.NET 

integration, 123, 125 
Microsoft Access, DBMS (database 

management system), 325-326 
Microsoft Developer Network (MSDN), 

online help resource, 327 
Microsoft, technical communities, 329 
money data type, SQL Server, 231 
money fields, SQL Server tables, 240 
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NavigateUrl property, navigation 

controls, 156-158 
navigation controls 

binding to Web . si temap file, 163-164 

dynamic data support, 155 

eyebrow menus, 164-165 

security trimming, 161-162 

site maps, 158-164 

static data support, 155 

ToolTips, 156-158 
n c h a r data type, SQL Server, 230 
New Web Site dialog box, new Web site 

creation, 22-23 
newspaper-style columns, Data Li st 

control text display, 301-302 
non-Unicode text, text data type, 229-230 
<not set> setting, Style Builder, 104 
null value, Boolean data type, 228, 232 



number data type, SQL Server, 228, 

230-232 
numbers 

Data Li st control formatting, 300-301 

formatting, 274-275 

subtotal display, 314-318 
numeric data type, SQL Server, 231 
nvarchar ( MAX ) data type, SQL 

Server, 230 
nvarchar data type, SQL Server, 230 
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objects 
alignments, 195-196 
moving, 56 

property editing, 29-30 
sizing, 196-197 
spacing, 197-198 
stacking, 194-195 
one-to-many relationships, SQL Server, 
223-227 

online resources, Web sites, 16-17 
other (specialized) data type, SQL 
Server, 228, 232-233 



P 



padding, styling, 113 
pages. See Web pages 
panes 

ContentPl aceHol der, 55-56, 61-63 
docking/undocking, 12 
hiding/displaying, 12 
Master Page layout element, 55-56 
Master Page styling, 60-63 
moving objects, 56 
moving/sizing, 11-12 
resetting to default display, 12 
View menu options, 13-14 
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Parameter Values Editor dialog box, 
data-bound control query 




ly control, ASP.NET, 

141-144 

PasswordRecovery, Login control, 131 
passwords 

authentication method, 42-43 

ChangePassword control, 145-146 

constraint editing, 149-151 

PasswordRecovery control, 141-144 

user accounts, 48-49 
people categories (roles) 

access rules, 45-48 

membership sites, 43-45 
period (.) character, class indicator, 103 
permissions, access rules, 45-48 
phone numbers, user profile 

element, 172 
pictures 

adding to a Web page, 28-29 

binary data type, 228 

borders, 89-91 

captions, 307-308 

centering troubleshooting, 91 

Data Li st control display, 302-308 

Master Page display 
troubleshooting, 71 

padding, 91 

position styling, 1 10-1 1 1 

positioning, 88-89 

sizing, 88, 305 

SQL Server table, 254-257 

styling, 88-91 

text wrapping, 89-90 

theme element, 201-202 

watermark uses, 107-108 

Web page addition, 87-91 
Pointer, Login control, 130 
postbacks, when to execute, 185 
precision, decimal data type limits, 231 



primary keys 

SQL Server tables, 237-238, 241-244 

Transact!' ons table, 243-244 
profile properties 

default values, 172, 174 

information storage, 187 

information types, 172, 173-175 

retrieving/editing, 184-187 

user profiles, 171 

viewing/editing, 284-287 

Visual Basic, 187-188 
programmatic names, control 

assignment, 177 
programmatic, control interaction 

method, 324-325 
programming languages 

preference selections, 22 

supported types, 21 
properties 

object editing, 29-30 

user interface element, 1 1 

validation controls, 188-192 

viewing/editing, 284-287 
Properties pane, object editing, 29-30 
Properties sheet 

docking/undocking, 29 

object property editing, 29-30 
publishing to the Web 

copying sites to hosting providers, 
334-336 

domain name requirement, 331-332 
hosting providers, 331-332 
preparing for uploads, 332-334 
services, 19 



Q 



queries 

data-bound control filters, 269-273 

SQL Server views, 248-254 
Query Builder, SQL Server views, 248-254 
quick links, creating, 85-86 
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&0:ontrol, value 



RDBMS (relational database-management 

system), SQL Server, 223 
readers, author's assumptions, 2-3, 

9-10 

real data type, SQL Server, 23 1 
records 

DropDown Li st control filtering, 
282-284 

FormVi ew control display, 312-318 
SQL Server table element, 222-223 
Recover Pas sword . aspx page, 

testing, 144 
regular expressions, validation control, 
190-191 

RegularExpressionValidator 

control, validation criteria, 190-191 
relational database-management system 

(RDBMS), SQL Server, 223 
relationships 
many-to-many, 223-227 
one-to-many, 223-227 
Requi redFi el dVal i dator control, 

text boxes, 189-190 
resources, online, 16-17 
Results pane, query results display, 

250-251 

rolegroups, creating/editing, 141 
roles (people categories) 

access rules, 45-48 

membership sites, 43-45 
rows 

adding to HTML tables, 79 
data-bound control query filters, 

269-273 
deleting, 79 
selections, 79-80 

SQL Server table element, 222-223 



scalar values 

floating-point numbers, 230-231 

integers, 230-231 

math function support, 172 

number data type, 228 
scale, decimal datatype limits, 231 
schemes, server controls, 127-128 
search engines, workflow process, 

123-124 
searches 

Help system element, 15 

user accounts, 50 
security 

access rules, 45-48 

authentications, 42-43 

user access prevention techniques, 
275-276 

security trimming, anonymous users, 
161-162 

Select a Master Page dialog box, 64 
Select Statements, data-bound control 

configuration, 265 
selections 

converting to a hyperlink, 85 

HTML tables rows/columns, 79-80 

text, 27-28 

themes, 210-216 
selectors, CSS component, 99-100 
semicolon (;) character, declarations, 99 
server controls. See also controls 

Auto Format, 127 

Common Tasks menu, 127-130 

editing in Design view, 126-127 

schemes, 127-128 

viewing in Source view, 148-149 

Web page addition, 125-130 
sidebars, Master Page layout, 53 
site maps 

adding to a Web page, 158-161 

dynamic data support, 155 
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SiteMapPath control, adding 
breadcrumb menu to a Web 




sitioned objects, 

196-197 
skins 

default versus named, 207-209 

described, 201 

file creation, 204-207 

theme element, 201 
smal 1 datetime data type, 

SQL Server, 232 
smal 1 money datatype, SQL Server, 231 
Solution Explorer 

adding a picture to a Web page, 
28-29, 87 

ASPNETDB . MDF database display, 51-52 

code-behind files, 33-34 

copying files to a folder, 25-26 

default theme creation, 199-200 

folder creation, 24-25 

log in before viewing restricted 
page, 182 

Master Pages folder creation, 54 

members-only content folder 
creation, 40 

new blank page creation, 76-77 

opening Web pages, 24 

quick link creation, 85-86 

renaming folders, 24 

user interface element, 1 1 

viewing Web pages in a browser, 65-66 

Web form creation, 64 

Web User Controls, 165-167 

Web . conf i g file display, 51-52 
sorts, data-bound controls, 267-268 
Source view 

absolutely-positioned item display, 195 

bookmark display, 86 

editing techniques, 92-96 

HTML debugging, 95-96 



selection techniques, 93 
server control viewing, 148-149 
switching to Design view, 23, 30-31 
tag/attribute entry conventions, 93-95 
Web page display, 23 
Web page editing techniques, 31-32 
spacing, absolutely-positioned objects, 
197-198 

specialized (other) data type, SQL 

Server, 228, 232-233 
SQL Server 

binary data type, 228 

bit datatype, 232 

Boolean data type, 228, 232 

char datatype, 230 

columns, 222-223 

data storage advantages, 221 

data type summary listing, 234-236 

date/time data type, 228, 232 

datetime datatype, 232 

DBMS (database management system), 
325-326 

decimal data type, 231 

development center, 329 

f 1 oat datatype, 231 

foreign keys, 241 

GUID (Globally Unique Identifier), 

232-234 
hyperlinks table, 257-259 
i nt data type, 231 

many-to-many relationships, 223-227 
membership site connection testing, 

41-42 
money datatype, 231 
money fields, 240 
nchar datatype, 230 
non-Unicode text, 229-230 
number data type, 228, 230-232 
numeri c data type, 231 
nvarchar ( MAX ) data type, 230 
nvarchar datatype, 230 
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one-to-many relationships, 223-227 
other (specialized) data type, 228, 



257 



primary keys, 237-238, 241-244 
Query Builder, 248-254 
query views, 248-254 
RDBMS (relational database- 
management system), 223 
real datatype, 231 
rows, 222-223 
saving tables, 240-241 
smal 1 datetime data type, 232 
smal 1 money data type, 231 
statements, 247-248 
table creation, 236-237 
table data entry, 244-246 
table data types, 227-233 
table definitions, 227-228 
table links, 247-254 
tables, 222-223 
text data type, 228-230 
text fields, 238-240 
ti nyi nt data type, 231 
Transact!' ons table, 241-244 
Unicode text, 229-230 
uni quei denti f i er data type, 
232-233 

varchar ( MAX ) data type, 230 

varchar datatype, 230 
Start Page, disabling/enabling, 14 
Starter Kits, ASP.NET, 328 
statements (lines) 

code element, 323-324 

SQL Server, 247-248 
static data, navigation control 

support, 155 
String data type, user profiles, 172-175 
strings 

connections, 263 

text data types, 229-230 



Style Builder 
accessing, 30 
background color, 57-58 
background styling, 107-108 
box/border styling, 113-114 
cell borders, 59-60 
cell height/width settings, 58-59 
ContentPl aceHol der pane styling, 
61-63 

CSS (Cascading Style Sheets) 
specifications, 57 

DIV styles, 121 

font styling, 105-107 

HTML table cell styling, 81-83 

layout styling, 112-113 

left pane styling, 60-61 

<not set> setting, 104 

saving changes, 114-115 

stacking objects, 194-195 

style rules, 104-115 

styling position, 110-111 

text alignments, 58, 108-110 

white space styling, 108-110 
style rules 

CSS (Cascading Style Sheets), 
101-104 

Style Builder editing, 104-115 
style sheets. See also Cascading Style 
Sheets (CSS) 

adding to a theme, 202-204 

copying between Theme folders, 203 

creating, 100-101 

links, 115-116 

saving changes, 115 
styles. See also Cascading Style Sheets 
(CSS) 

Gri dVi ew control, 280 

skin file creation, 205-206 
subtotals, Web page display, 314-318 
symbols, date/time number 
formatting, 275 
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Blanks 



L Server tables, 



tables 
binary data type, 228 
Boolean data type, 228, 232 
closing, 223 

column definitions, 236-237 

creating, 236-237 

data entry, 244-246 

data information display, 222-223 

data types, 227-223 

data-bound control selections 265 

date/time data type, 228, 232 

Detai 1 sVi ew control binding, 287-290 

foreign keys, 241 

grid display control, 276-280 

HTML, 77-84 

hyperlinks, 257-259 

links, 247-254 

many-to-many relationships, 224-227 
money fields, 240 
number data type, 228, 230-232 
one-to-many relationships, 224-227 
other (specialized) data type, 228, 

232-233 
picture, 254-257 
primary keys, 237-238, 241-244 
profile property storage, 187 
saving, 240-241 

SQL Server organization, 222-223 
styling, 110 

table definitions, 227-228 

text data type, 228-230 

text fields, 238-240 

Transact!' ons, 241-244 

viewing existing, 222-223 
tabs, Help system navigation, 16 
tags, Source view entry conventions, 
93-95 



templates 

control conversion, 128-129 

Data Li st control, 298-299 

editing, 129-130 

Master Page layouts, 55-56 
text 

adding to a Web page, 27 

Data Li st control display, 296-300 

formatting, 27-28 

selections, 27-28 

undoing changes, 28 
Text property, navigation controls, 

156-158 
text alignments 

Master Pages, 58 

styling, 108-110 
text boxes 

CompareVal i dator control, 191-192 

Requi redFi el dVal i dator control, 
189-190 

text data type, SQL Server, 228-230 
text fields, SQL Server tables, 238-240 
text formatting, HTML table cells, 82 
text wrapping, pictures, 89-90 
Text box controls 
user profile information entry, 
177-178 

viewing user properties, 285-287 
Theme folders 

creating subfolders, 200-201 

deleting, 200 

renaming, 200 

theme storage, 199-200 
themes 

application methods, 214-216, 

218-219 
data information types, 201 
default creation, 199-200 
described, 199 
folders/subfolders, 199-201 
Li stBox control, 212-213 
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Master Page application, 217-218 
member page display/selections, 




U 



IcHw*, 210-216 
pictures, 201-202 
preferred storage, 213-214 
site-wide default theme, 219-220 
skins, 201, 204-209 
style sheets, 201,202-204 
testing, 216 

Web page uses, 209-210 
time/date columns, number formatting, 
274-275 

time/date data type, SQL Server, 228, 232 
times, Gri dVi ew control formatting, 279 
ti ny i nt data type, SQL Server, 231 
titles, creating, 34-35 
toolbars, viewing, 100-101 
Toolbox 
adding controls to a HTML table 
cell, 84 

adding controls to Master Pages, 68 
adding server controls to a Web 

page, 125 
navigation controls, 155-158 
user interface element, 10-11 
validation controls, 188-192 
ToolTips, navigation controls, 156-158 
Transact!' ons table, SQLServer, 

241-244 
transactions 
Master-Details forms, 291-292 
primary key field, 243-244 
TreeVi ew control, site-navigation, 

154-158 
troubleshooting 
Master Page picture display, 71 
picture centering, 91 
true/false values, Boolean data type, 
228, 232 



Unicode text, text data type, 229-230 
uni quei denti f i er data type, SQL 

Server, 232-233 
uploads 

copying sites to hosting providers 
334-336 

Web publishing preparations, 332-334 
user accounts 
active versus inactive users, 49 
ASP.NET creation, 131-135 
authentications, 42-43 
CreateUserWi za rd control, 132-135 
creating, 48-49 
database access prevention 

techniques, 275-276 
editing/deleting, 50-51 
GUID (Globally Unique Identifier), 

232-234 

many-to-many relationships, 224-227 
membership sites, 39-40 
membership testing, 146-148 
PasswordRecovery control, 141-144 
passwords, 48-49 
preferred theme storage, 213-214 
preferred themes, 210-211 
searches, 50 

table data information display, 222-223 

theme page display/selections, 211-212 

validation controls, 188-192 
user interface, elements, 10-16 
user profiles 

datatypes, 172, 173-175 

event/code tying, 180-183 

information entry page, 176-188 

information storage, 183-184, 187 

phone numbers, 172 

profile properties, 171 

retrieving/editing, 184-187 
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String datatype, 172, 173-175 
D f^fy|>r<K 177-178 

Web. config file, 173-175 
ZIP codes, 172 
user properties, editing/viewing, 
284-287 



•(/• 

validation controls 

CompareVal idator, 191-192 
CustomVal i dator, 192 
properties, 188-192 
RangeVal idator, 190 
RegularExpressionVal idator, 
190-191 

Requi redFieldVal idator, 189-190 

Val i da ti onSummary, 192 
Val i da ti onSummary control, failed 

validations, 192 
values 

Boolean data type, 228, 232 
CompareVal idator control, 191-192 
CustomVal i dator control, 192 
data-bound control display, 268-269 
GUID (Globally Unique Identifier), 
232-234 

primary key field, 237-238, 241-244 
RangeVal i dator control, 190 
varchar ( MAX ) data type, SQL 

Server, 230 
varchar data type, SQL Server, 230 
View menu, user interface element, 

13-14 
views 

creating in Database Explorer, 249 
data-bound control selections, 265 
grid display control, 276-280 
query results display, 250-251 



saving, 251 

SQL Server query, 248-254 

switching between, 23, 30-31 

user properties, 284-287 

vw_aspnet_, 248 
Visual Basic language 

profile properties, 187-188 

supported programming language, 21 
Visual Studio, software-development 

tool, 322 
Visual Web Developer Express 

browser compatibility settings, 17-19 

installation, 10 

IntelliSense technology, 31 

supported programming languages, 21 

user interface elements, 10-16 
vw_aspnet_ views, SQL Server, 248 

W3C (World Wide Web Consortium), 

HTML specifications, 327 
WAT (Web Site Administration Tool) 
access rules, 45-48 
membership sites, 40-43 
roles (people categories), 43-45 
user accounts, 48-51 
Web publishing preparations, 
332-333 

watermarks, background styling, 
107-108 

Web application, described, 321 
Web browsers 

compatibility issues, 17-19 

viewing Web pages, 35-36, 65-66 
Web forms. See also forms 

Button control addition, 178-179 

button addition, 178-179 

Master Pages, 63-66 

skin file creation, 205 

Text box controls, 177-178 
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theme page display/selections, 

DropBiSks atlone " ,ry 

' uses, 75 

validation controls, 188-192 
Web pages. See also Master Pages 
adding Master Pages to, 69-71 
blank page creation, 75-77 
bookmarks, 86 
closing/opening, 23-24 
code-behind files, 33-34 
content page, 65 
CSS class selectors, 117-118 
CSS element selectors, 116-117 
Defaul t. aspx, 22-23 
DIV styles, 120-121 
editing techniques, 26-32 
element class selectors, 119-120 
eyebrow menu addition, 164-165 
horizontal rules, 92 
HTML Pages, 75 
HTML tables, 77-84 
hyperlinks, 84-87 
Login controls, 130-131 
Logi n . aspx, 135-136 
navigation control addition, 155-158 
object properties, 29-30 
picture addition, 87-91 
picture insertion, 28-29 
quick links, 85-86 
RecoverPassword . aspx, 144 
saving changes before closing, 32-33 
saving changes when closing, 24 
server control addition, 125-130 
site map addition, 158-164 
Source view editing techniques, 92-96 
style applications, 116-121 
subtotal display, 314-318 
switching between Design/Source 
views, 23 



text addition, 27 

text formatting, 27-28 

text selections, 27-28 

theme uses, 209-210 

theme view/selections, 211-212 

titles, 34-35 

types, 75 

undoing changes, 28 
user profile information entry, 
176-188 

viewing in a browser, 35-36, 65-66 
Web Forms, 75 

Web User Control addition, 165-167 
Web presence provider, publishing to 

the Web, 19 
Web Site Administration Tool (WAT) 

access rules, 45-48 

membership sites, 40-43 

roles (people categories), 43-45 

user accounts, 48-51 

Web publishing preparations, 
332-333 
Web sites 

ASP.NET forums, 329 

ASP.NET QuickStart Tutorials, 17 

ASP.NET specifications, 328 

Cascading Style Sheets (CSS), 17 

coolnerds.com, 16 

creating new, 22-23 

CSS (Cascading Style Sheets), 122, 328 

domain names, 332 

dotnetjunkies, 329 

Google, 123 

hosting services, 19 

Microsoft technical communities, 329 

MSDN (Microsoft Developer 
Network), 327 

navigation considerations, 153-154 

.NET Framework Developer Center, 17 

online resources, 16-17 

opening/closing, 37 
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renaming, cc 

Dropitsete 



Web Sites (continued) 

ren aming. 22 

leme, 219-220 
Iper Center, 17, 329 
Visual C# Developer Center, 17 
W3C (World Wide Web Consortium), 327 
World Wide Web Consortium, 122 
XHTML Home Page, 17 
XML (Extensible Markup Language), 
17, 328 

Web User Controls, adding to a Web 

page, 165-167 
Web . conf i g file 

password constraints, 150-151 

security trimming, 162 

Solution Explorer display, 51-52 

user profiles, 173-175 
Web . si temap file 

adding sitemap to a Web page, 158-161 

control binding, 163-164 

security trimming, 162-163 
white space 

Data Li st control display, 299 

styling, 108-110 



Windows authentication, membership 

sites, 42-43 
Windows, copying/pasting files to a 

folder, 26 

wizards, Data Configuration, 262-273 
World Wide Web Consortium (W3C), 

HTML specifications, 327 
wraps, text around pictures, 89-90 



XML (extensible Markup Language), 
specifications, 328 

• Z» 

Z-indexes 

absolute positioning, 194-195 

position styling, 111 
ZIP codes, user profile element, 172 
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